<!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. Codeforces Round #313 (Div. 2) A B C 思路 枚举 数学

    A. Currency System in Geraldion time limit per test 2 seconds memory limit per test 256 megabytes in ...

  2. Fresco好案例

    http://www.open-open.com/lib/view/open1436094840774.html

  3. 发布常见问题（C#）

    1.Sys.WebForms.PageRequestManagerServerErrorException: 在服务器上处理请求时出现未知错误.服务器返回的状态码为: 500 可能的原因: asp.n ...

  4. poj2762 强连通+拓扑序

    题意:有 n 个房间,不同房间之间有单向通道,问是否任意两个房间 A .B 都可以从 A 到 B 或从 B 到 A(有一条有就可以). 在这题中,如果一些点是在同一个强连通分量中,那么这些点肯定能够相 ...

  5. feature visualization from ipython notebook

    Feature visualization from ipython notebook Wang Xiao 1. install anaconda2 from: https://www.continu ...

  6. MFC应用程序框架（转）

    对于程序员来说,如果要提高编程效率,一个好用的,功能强大的并且可以得心应手使用的编程工具往往会给我们程序员带来莫大的方便.其实对于现在的编程工具来说,使用哪一种工具都不是问题的关键,重要的是你能够使用 ...

  7. CSS Position 定位属性介绍

    1.介绍 1.1 说明 Position 属性:规定元素的定位类型.即元素脱离文档流的布局,在页面的任意位置显示. 1.2 主要的值 ①absolute :绝对定位:脱离文档流的布局,遗留下来的空间由 ...

  8. 【转】 C#程序以管理员权限运行

    C#程序以管理员权限运行在Vista 和 Windows 7 及更新版本的操作系统,增加了 UAC(用户账户控制) 的安全机制,如果 UAC 被打开,用户即使以管理员权限登录,其应用程序默认情况下也无 ...

  9. Html.BeginForm())与Ajax.BeginForm()

     一.@using (Html.BeginForm())参数示例 1.指定表单提交方式和路径等 @using (Html.BeginForm("Index", "Home ...

  10. 阅读layim代码小记，实现可以更改用户签名的方法

    用layim原版的时候发现,用户的签名是不能直接修改的,如下: 其实要改也很简单,查看一下源代码,然后加一个input进去,可是,加完之后是这样的: 没关系,给它一个样式,让它乖乖的“隐藏“起来. / ...