码迷,mamicode.com
首页 > Web开发 > 详细

3D视觉差---原生js+css

时间:2016-08-16 23:56:19      阅读:565      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title></title>
  <style> 
      * { padding: 0; margin: 0; }body { background: #42509a; }

      ul { width: 800px; height: 500px; border: 1px solid #333; background: #05090e; overflow: hidden; position: relative; margin: 50px auto 0; }

      li { position: absolute; list-style: none; }
      #pic1 { top: 210px; left: 550px; }
      #pic2 { top: 290px; left: 430px; }
      #pic3 { top: 215px; left: 220px; }
      #pic4 { top: 150px; left: 100px; }
      #pic6 { top: 290px; left: 80px; }
      #pic7 { top: 120px; left: 480px; }
      #pic8 { top: 60px; left: 380px; }
      #pic5 { top: -40px; left: -50px; width: 1422px; height: 1000px; background: url(../images/bg.jpg) no-repeat; }

      p{text-align:center; padding:10px 0; color:#FFF;}
      p a{color:#FFF; text-decoration:none;}
      p a:hover{text-decoration:underline;}

   </style>
 7     <script>
 8         window.onload=function(){
 9             var oUl=document.getElementById(ul_container);
10             var aLi=oUl.getElementsByTagName(li);
11             var x=0;
12             var y=0;
13             document.onmousedown=function(ev){
14                 var oEvent=ev || event;
15                 var disX=oEvent.clientX-x;
16                 var disY=oEvent.clientY-y;
17                 document.onmousemove=function(ev){
18                     var oEvent=ev||event;
19                      x=    oEvent.clientX-disX;
20                      y=oEvent.clientY-disY;
21                      for(var i=0;i<aLi.length;i++){
22                         aLi[i].style.marginLeft=x*aLi[i].style.zIndex/20+px;
23                         aLi[i].style.marginTop=y*aLi[i].style.zIndex/20+px;     
24                      }
25                 };    
26                 document.onmouseup=function(){
27                     document.onmousemove=null;
28                     document.onmouseup=null;
29                     document.reseaseCapture&&document.reseaseCapture();    
30                 };
31                    document.setCapture&&document.setCapture();
32                    return false;
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" alt="123" /></li>
42     <li id="pic2" style="z-index: 4;"><img src="images/2.jpg" alt="123" /></li>
43     <li id="pic3" style="z-index: 5;"><img src="images/3.jpg" alt="123" /></li>
44     <li id="pic4" style="z-index: 4;"><img src="images/4.jpg" alt="123" /></li>
45     <li id="pic6" style="z-index: 3;"><img src="images/5.jpg" alt="123" /></li>
46     <li id="pic7" style="z-index: 2;"><img src="images/6.jpg" alt="123" /></li>
47     <li id="pic8" style="z-index: 5;"><img src="images/7.jpg" alt="123" /></li>
48     <li id="pic5" style="z-index: 1;"></li>
49 </ul>
50 
51 
52 </body>
53 </html>

 

3D视觉差---原生js+css

标签:

原文地址:http://www.cnblogs.com/lixuekui/p/5778211.html

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