瞅我干啥?

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title></title>
 6     <style>
 7         * { padding: 0; margin: 0; }
 8         body { background: #42509a; height:3000px;}
 9         ul { width: 800px; height: 500px; border: 1px solid #333; background: #05090e; overflow: hidden; position: fixed;
10             left:50%; margin-left: -400px; top:50%; margin-top: -250px;}
11         li { position: absolute; list-style: none; }
12         #pic1 { top: 210px; left: 550px; }
13         #pic2 { top: 290px; left: 430px; }
14         #pic3 { top: 215px; left: 220px; }
15         #pic4 { top: 150px; left: 100px;  }
16         #pic6 { top: 290px; left: 80px;  }
17         #pic7 { top: 120px; left: 480px;  }
18         #pic8 { top: 60px; left: 380px;  }
19         #pic5 { top: -40px; left: -50px; width: 1422px; height: 1000px; background: url(../images/bg.jpg) no-repeat; }
20         
21         p{text-align:center; padding:10px 0; color:#FFF;}
22         p a{color:#FFF; text-decoration:none;}
23         p a:hover{text-decoration:underline;}
24     </style>
25     <script>
26         window.onload=window.onscroll=function(){
27             var oUl=document.getElementById('ul_container');
28             var aLi=oUl.children;
29 
30             var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
31             for(var i=0; i<aLi.length; i++){
32                 aLi[i].style.marginTop=-scrollTop*aLi[i].style.zIndex/20+'px';
33             }
34         };
35     </script>
36 </head>
37 
38 <body>
39 
40 <ul id="ul_container">
41     <li id="pic1" style="z-index: 3;"><img src="images/1.jpg"  /></li>
42     <li id="pic2" style="z-index: 4;"><img src="images/2.jpg"  /></li>
43     <li id="pic3" style="z-index: 5;"><img src="images/3.jpg"  /></li>
44     <li id="pic4" style="z-index: 4;"><img src="images/4.jpg"  /></li>
45     <li id="pic6" style="z-index: 3;"><img src="images/5.jpg"  /></li>
46     <li id="pic7" style="z-index: 2;"><img src="images/6.jpg"  /></li>
47     <li id="pic8" style="z-index: 5;"><img src="images/7.jpg"  /></li>
48     <li id="pic5" style="z-index: 1;"></li>
49 </ul>
50 
51 
52 </body>
53 </html>

 

posted on 2016-08-16 23:01  瞅我干啥?  阅读(220)  评论(0编辑  收藏  举报