<!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. BUTTON标签和INPUT标签的区别【转】

    一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大. HTML 4.01规范的Fo ...

  2. maven出错The folder is already a source folder

    右键build path -> configure build path -> source ,选择 src/main/java.src/test/java删除,然后再新建.

  3. Ansible安装配置Nginx

    一.思路 现在一台机器上编译安装好nginx.打包,然后在用ansible去下发 cd /etc/ansible 进入ansible配置文件目录 mkdir roles/{common,install ...

  4. URAL（timus）1709 Penguin-Avia（并查集）

    Penguin-Avia Time limit: 1.0 secondMemory limit: 64 MB The Penguin-Avia airline, along with other An ...

  5. hihoCoder #1033 : 交错和 （数位Dp）

    题目大意: 给定一个数 x,设它十进制展从高位到低位上的数位依次是 a0, a1, ..., an - 1,定义交错和函数: f(x) = a0 - a1 + a2 - ... + ( - 1)n - ...

  6. PPT图片快速编辑技巧

    修改*.ppt或*.pptx的后缀名为zip 例如:demo.pptx修改为demo.zip 修改为, 使用压缩软件打开此压缩包, 一般图片资源都会存放在ppt/media下 找到你所要修改的图片,然 ...

  7. java基础之：匿名内部类

    在java提高篇-----详解内部类中对匿名内部类做了一个简单的介绍,但是内部类还存在很多其他细节问题,所以就衍生出这篇博客.在这篇博客中你可以 了解到匿名内部类的使用.匿名内部类要注意的事项.如何初 ...

  8. （转）现代C++函数式编程

    本文转自:http://geek.csdn.net/news/detail/96636     现代C++函数式编程 C++ 函数式编程 pipeline 开发经验 柯里化 阅读2127    作者简 ...

  9. 开发成功-cpu-mem监控动态折线图--dom esayui js java

    jsp ------------------------------------------------------------------------------------------- ---- ...

  10. Mongo导出数据文件导致错误 Got signal: 6 (Aborted)解决方法

    一哥们要导出一个数据表的数据,结果导出一半,硬盘不够用,卡死了, 然后重启主机,导致mongo启动后进程自动死掉, 报错如下. Mon Oct 28 10:39:02.270 [initandlist ...