<!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. Get access to Servlet

    import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class LoginServlet extend ...

  2. C语言指针与数组的定义与声明易错分析

    部分摘自<C语言深度解剖> 1.定义为数组,声明为指针 在文件1中定义: char a[100]; 在文件2中声明: extern char *a; //这样是错误的 这里的extern告 ...

  3. 论文笔记之：Decoupled Deep Neural Network for Semi-supervised Semantic Segmentation

    Decoupled Deep Neural Network for Semi-supervised Semantic Segmentation xx

  4. KMP字符串模式匹配学习笔记

    KMP算法实验 1．编程计算模式串(子串)的next值.2．利用KMP算法在主串中找到模式串的位置. 参考代码:---------int getNexlVal( char * s,  int j)// ...

  5. dede模板完全控制攻略

    1.使用php代码 @me代表了当前字段的值 {dede:tagname runphp='yes'} @me = "123456";//如果使用了自定义函数 则@me得到的是函数返 ...

  6. 利用C#Marshal类实现托管和非托管的相互转换

    Marshal 类 命名空间:System.Runtime.InteropServices 提供了一个方法集,这些方法用于分配非托管内存.复制非托管内存块.将托管类型转换为非托管类型,此外还提供了在与 ...

  7. excel让每个单元格的宽度随着字体自动变动的两种方式(有更好方法的大神，请忽略,求评论下)

    1.打开在EXCEL的工作表,点击工作表左上方的方框,选中整个工作表,将鼠标一致A列的右边线处,也就是A列和B列中间的分界线处,光标会变成十字,鼠标左键双击,列宽会调整到最恰当处.截图如下

  8. 使用PHP+ajax打造聊天室应用

    方法1.  comet http://www.xiumu.org/technology/the-php-notes-comet-long-connection-instance.shtml  这篇文章 ...

  9. 阿里云安装nginx 和 php-fpm

    yum install yum-priorities -y rpm -Uvh http://download.fedora.redhat.com/pub/epel/5/i386/epel-releas ...

  10. MyBatis入门学习

    所需要jar包:mybatis-3.x.x.jar .如果需要和spring整合,还需要加入相关的包 1:看项目目录 红颜色不要关心 2:按照步骤: 1:加入jar包 2:创建数据源(configur ...