zoukankan      html  css  js  c++  java
  • 3D视觉差---原生js+css

     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 { 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; 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>
  • 相关阅读:
    三大主流负载均衡软件对比(LVS+Nginx+HAproxy)
    nginx 提示the "ssl" directive is deprecated, use the "listen ... ssl" directive instead
    centos安装nginx并配置SSL证书
    hadoop创建目录文件失败
    The server time zone value 'EDT' is unrecognized or represents more than one time zone.
    脚本启动SpringBoot(jar)
    centos做免密登录
    数据库远程连接配置
    Bash 快捷键
    TCP三次握手四次断开
  • 原文地址:https://www.cnblogs.com/lixuekui/p/5778211.html
Copyright © 2011-2022 走看看