<!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 #377 (Div. 2) A B C D 水/贪心/贪心/二分

    A. Buy a Shovel time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  2. css透明度的设置 （兼容所有浏览器）

    一句话搞定透明背景! .transparent_class { filter:alpha(opacity=); -moz-opacity:0.5; -khtml-opacity: 0.5; opaci ...

  3. jq 全选/取消效果

    //全选框$('#btnbutton').live('click',function(){ var data = $(this).attr('data'); if(data=='on'){ $(&qu ...

  4. MATLAB格式化输出控制 分类： 数学 2015-07-31 23:01 3人阅读 评论(0) 收藏

    MATLAB格式化输出控制 format 默认格式 format short 5字长定点数 format long 15字长定点数 format short e 5字长浮点数 format long ...

  5. leetcode 137. Single Number II ----- java

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  6. Kali安装

    Kali Linux 前身是 BackTrack ,不过Kali Linux是基于Debian 的 Linux 发行版,而BackTrack 则是基于Uubntu的,现在BackTrack 已经不更新 ...

  7. audition输出参数设置

  8. H2 database 行相加-行列转换

    create or replace view view_acceptCompanyasselect *  from  (select WARNIGID,max(CASEWHEN(zhtablename ...

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

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

  10. linux概念之cpu分析

    http://ilinuxkernel.com/?cat=4 Linux CPU占用率原理与精确度分析1  CPU占用率计算原理在Linux/Unix 下,CPU 利用率分为用户态.系统态和空闲态,分 ...