码迷,mamicode.com
首页 > 其他好文 > 详细

炎炎夏日,走入美妙的前端设计案例

时间:2014-07-26 14:43:01      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   os   strong   io   

1、  嘎嘎夏天到了!最近同事分享我一个案例,说这效果不错,看看我能不能实现

   ( 鄙人后台程序员,热爱前端,前端是女人的外貌; 后台是女人的内涵)

  我们先从外貌说起,看原始案例的效果

        bubuko.com,布布扣

 

  外貌看起来 很简洁,主题很明确,效果也很流畅,还算比较炫吧,我一下就喜欢她了!

 刚开始我以为她的内涵可能是css3居多,其实不然是css居多

/-----------------------------------骚骚的分割线---------------------------------------/

2、我的实现

   --布局:5个对象绝对定位、改变每个对象的left和top值,对象有大有小(用css3 缩放来对图片进行缩放),

           而且每个图片的间距有对称,分析图如下:

   bubuko.com,布布扣

     

  具体代码如下:

     

 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实现动态效果,先来看一张我的分析图

    bubuko.com,布布扣

   

    完整的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,布布扣

炎炎夏日,走入美妙的前端设计案例,布布扣,bubuko.com

炎炎夏日,走入美妙的前端设计案例

标签:style   blog   http   java   color   os   strong   io   

原文地址:http://www.cnblogs.com/zjflove/p/3869864.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!