1、 嘎嘎夏天到了！最近同事分享我一個案例，說這效果不錯，看看我能不能實現
( 鄙人后台程序員,熱愛前端,前端是女人的外貌; 后台是女人的內涵)
我們先從外貌說起，看原始案例的效果
外貌看起來 很簡潔，主題很明確，效果也很流暢，還算比較炫吧,我一下就喜歡她了！
剛開始我以為她的內涵可能是css3居多，其實不然是css居多
/-----------------------------------騷騷的分割線---------------------------------------/
2、我的實現
--布局：5個對象絕對定位、改變每個對象的left和top值，對象有大有小(用css3 縮放來對圖片進行縮放)，
而且每個圖片的間距有對稱，分析圖如下：
具體代碼如下：
1 <style type="text/css"> 2 * 3 { 4 margin: 0; 5 padding: 0; 6 } 7 #wrap 8 { 9 border: 1px solid red; 10 position: relative; 11 width: 90%; 12 padding: 5%; 13 } 14 15 #list 16 { 17 list-style: none; 18 position: absolute; 19 } 20 #list li 21 { 22 /* 23 -webkit-transition: all 0.6s ease;*/ 24 position: absolute; 25 } 26 27 #list li:nth-of-type(5) 28 { 29 -webkit-transform: scale(1); 30 transform: scale(1); 31 left: 120px; 32 top: 100px; 33 z-index: 5; 34 } 35 /*-----1、3----*/ 36 #list li:nth-of-type(1) 37 { 38 -webkit-transform: scale(0.8); 39 transform: scale(0.8); 40 left: 30px; 41 top: 80px; 42 z-index: 4; 43 } 44 #list li:nth-of-type(4) 45 { 46 -webkit-transform: scale(0.8); 47 transform: scale(0.8); 48 left: 210px; 49 top: 70px; 50 z-index: 3; 51 } 52 /*----4、5----*/ 53 #list li:nth-of-type(2) 54 { 55 -webkit-transform: scale(0.65); 56 transform: scale(0.65); 57 left: 80px; 58 top: 40px; 59 z-index: 2; 60 } 61 #list li:nth-of-type(3) 62 { 63 -webkit-transform: scale(0.65); 64 transform: scale(0.65); 65 left: 160px; 66 top: 40px; 67 z-index: 1; 68 } 69 </style> 70 </head> 71 <body style="background: #abcdef;"> 72 <div id="prev" style="background: #abcdef; width: 20px; height: 20px; border: 1px solid red; 73 position: absolute; left: 100px; top: 250px; cursor: pointer;"> 74 << 75 </div> 76 <div id="next" style="background: #abcdef; width: 20px; height: 20px; border: 1px solid red; 77 position: absolute; left: 200px; top: 250px; cursor: pointer;"> 78 >> 79 </div> 80 <div class="wrap"> 81 <ul id="list"> 82 <li> 83 <img src="hzp/pro1.png" /></li> 84 <li> 85 <img src="hzp/pro2.png" /></li> 86 <li> 87 <img src="hzp/pro3.png" /></li> 88 <li> 89 <img src="hzp/pro4.png" /></li> 90 <li> 91 <img src="hzp/pro5.png" /></li> 92 </ul> 93 </div> 94 </body>
--js實現動態效果，先來看一張我的分析圖
完整的js代碼：
---------------------------------------------------
1 <script type="text/javascript"> 2 3 window.onload = function () { 4 5 6 var list = document.getElementById("list"); 7 var aLis = list.getElementsByTagName("li"); 8 var arr = []; 9 10 $("li").each(function (k, v) { 11 arr[k] = { left: getStyle(this, "left"), top: getStyle(this, "top"), scale: getStyle(this, "-webkit-transform"), zIndex: getStyle(this, "z-index") }; 12 }); 13 14 function getStyle(obj, attr) { 15 if (obj.currentStyle) { 16 return obj.currentStyle[attr]; 17 } 18 return getComputedStyle(obj)[attr]; 19 } 20 21 $("#prev").click(function () { 22 arr.push(arr.shift()); //prev 23 //左邊 24 toExchage(); 25 26 }) 27 28 $("#next").click(function () { 29 arr.unshift(arr.pop()); //next 30 toExchage(); 31 }) 32 33 //#region 獲取變換后的對象 34 function toExchage() { 35 36 $("li").each(function (k, v) { 37 38 /* 39 this.style.left = arr[k].left; 40 this.style.top = arr[k].top; 41 this.style.WebkitTransform = arr[k].scale; 42 this.style.zIndex = arr[k].zIndex; 43 */ 44 45 var params = { 46 "left": arr[k].left, 47 "top": arr[k].top, 48 "z-index": arr[k].zIndex 49 } 50 51 $(this).stop(true).animate(params, 200, 'linear', function () { 52 $(this).css({ "-webkit-transform": arr[k].scale, "transform": arr[k].scale }); 53 }); 54 55 }); 56 57 } 58 //#endregion 59 60 } 61 </script>
寫完之后 我感概萬分：於是乎 我揮筆寫下了如下說說，遭一群逗比挖苦不堪
