<!doctype html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <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>

     <script>

         window.onload=function(){

             var oUl=document.getElementById('ul_container');

             var aLi=oUl.getElementsByTagName('li');

             var x=;

             var y=;

             document.onmousedown=function(ev){

                 var oEvent=ev || event;

                 var disX=oEvent.clientX-x;

                 var disY=oEvent.clientY-y;

                 document.onmousemove=function(ev){

                     var oEvent=ev||event;

                      x=    oEvent.clientX-disX;

                      y=oEvent.clientY-disY;

                      for(var i=;i<aLi.length;i++){

                         aLi[i].style.marginLeft=x*aLi[i].style.zIndex/+'px';

                         aLi[i].style.marginTop=y*aLi[i].style.zIndex/+'px';

                      }

                 };

                 document.onmouseup=function(){

                     document.onmousemove=null;

                     document.onmouseup=null;

                     document.reseaseCapture&&document.reseaseCapture();

                 };

                    document.setCapture&&document.setCapture();

                    return false;

             };

         };

     </script>

 </head>

 <body>

 <ul id="ul_container">

     <li id="pic1" style="z-index: 3;"><img src="data:images/1.jpg" alt="" /></li>

     <li id="pic2" style="z-index: 4;"><img src="data:images/2.jpg" alt="" /></li>

     <li id="pic3" style="z-index: 5;"><img src="data:images/3.jpg" alt="" /></li>

     <li id="pic4" style="z-index: 4;"><img src="data:images/4.jpg" alt="" /></li>

     <li id="pic6" style="z-index: 3;"><img src="data:images/5.jpg" alt="" /></li>

     <li id="pic7" style="z-index: 2;"><img src="data:images/6.jpg" alt="" /></li>

     <li id="pic8" style="z-index: 5;"><img src="data:images/7.jpg" alt="" /></li>

     <li id="pic5" style="z-index: 1;"></li>

 </ul>

 </body>

 </html>

3D视觉差---原生js+css的更多相关文章

  1. 原生视觉差滚动---js+css;

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  3. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  4. 原生JS+CSS实现日期插件

    笔者最近在学习Element UI,觉得它提供的日期选择器既简单又美观,于是仿照着写了一个日期插件.笔者使用到的技术有ES5.CSS和HTML,控件兼容IE10+和谷歌浏览器.有一点需要注意,笔者使用 ...

  5. 兼容所有浏览器---无缝上下左右交叉运动----原生js+css

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）

    想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...

  7. css实现视觉差的滚动

    之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果 ...

  8. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  9. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

随机推荐

  1. Q郵箱轉移自定義目錄中的郵件

    1.之前在Q郵箱上建立了許多規則和收件箱,現在想統一用Mac上的郵局管理 2.Mac上會同步對應郵箱的自定義目錄,此時這些目錄便十分多餘礙眼 3.Q郵箱單頁顯示郵件數量上限是100,這意味著手動轉移十 ...

  2. UVa 489 刽子手游戏

    游戏规则,计算机想一个单词让你猜,你每次可以猜一个字母,如果单词里有那个字母,所有该字母都会显示出来,如果没有那个字母则计算机会在一副"刽子手"画上填一笔,这幅画一共需要7笔就能完 ...

  3. Java动物声音模拟器

    abstract class Animal{ abstract void cry(); abstract String getAnimalName(); } class Simulator{ void ...

  4. php脚本时 linux命令获取服务器IP

    exec("netstat -anp | grep smtp",$sendList);   //php脚本获取服务器邮件进程数 exec("netstat -anp |g ...

  5. phpwind8.7升级9.0.1过程（四）20130207升级到20141228

    每一次升级前都要注意备份 1.网站根目录的所有文件 2.网站的数据库 根据phpwind官方教程 更新到20130702版本成功并备份 更新到20140428版本成功并备份 20141228版本的更新 ...

  6. java多线程之：SynchronousQueue队列

    SynchronousQueue是这样一种阻塞队列,其中每个 put 必须等待一个 take,反之亦然.同步队列没有任何内部容量,甚至连一个队列的容量都没有.      不能在同步队列上进行 peek ...

  7. CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  8. 制作和unity调用动态链接库dll文件

    首先用vc建立一个dll工程 然后在里面建立一个testunity.h文件.内容如下 1 extern "C" int _declspec(dllexport)testunity( ...

  9. kubernetes集群部署

    鉴于Docker如此火爆,Google推出kubernetes管理docker集群,不少人估计会进行尝试.kubernetes得到了很多大公司的支持,kubernetes集群部署工具也集成了gce,c ...

  10. SSH客户端(如PuTTY)ssh远程登录Linux非常慢的解决方法

    转:http://blog.useasp.net/archive/2014/05/19/solved-the-problem-of-ssh-client-such-as-putty-remote-lo ...