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>
写完之后 我感概万分：于是乎 我挥笔写下了如下说说，遭一群逗比挖苦不堪
炎炎夏日,走入美妙的前端设计案例
时间： 2024-12-29 23:21:38