标签：style blog http java color os strong io
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>
写完之后 我感概万分：于是乎 我挥笔写下了如下说说，遭一群逗比挖苦不堪
炎炎夏日,走入美妙的前端设计案例,布布扣,bubuko.com
标签：style blog http java color os strong io
原文地址：http://www.cnblogs.com/zjflove/p/3869864.html
