[JS实例] 跟随鼠标移动而发生视差动画的图片

演示效果：http://www.jq22.com/yanshi4800

原文出自以上地址，我根据实例内的代码修改了一下。

一、构建html

实例内有5层需要移动的图片，需要使用绝对定位，并用z-index排列好层次，一定要有style=”z-index”属性。

<ul id="mousemove"> 
  <li class="pic-zaijian" style="z-index: 3;"><img src="images/5644025cN28d8a58c.png" alt="" /></li> 
  <li class="pic-yhao" style="z-index: 2;"><img src="images/5644025cN8cd82f47.png" alt="" /></li> 
  <li class="pic-11y" style="z-index: 4;"><img src="images/56440ff7N8104ff46.png" alt="" /></li> 
  <li class="pic-joy" style="z-index: 5;"><img src="images/5644369dN2177d534.png" alt="" /></li> 
  <li class="pic-light" style="z-index: 6;"><img src="images/564409feN8fc5ae9f.png" alt="" /></li> 
 </ul>

二、编写css样式

根据你的实际需要写好css样式，把各个图片都定好位，使用绝对定位absolute。

三、编写js代码

关键的js代码部分

<script>
function ScrollBG () {
    //定义滚动背景容器变量
    var oUl = document.getElementById('mousemove'),
        oLi = oUl.getElementsByTagName('li'),
        //获取当前窗口的尺寸并改变其中心为原点坐标，也可以改为仅获取指定层的坐标:oUl.offsetWidth
        x = document.body.offsetWidth/2,
        y = document.body.offsetHeight/2;

    //设置当前窗口内的鼠标移动事件，也可以改为仅作用于指定层:oUl.onmousemove
    document.body.onmousemove = function (event) {
        //获取鼠标在当前窗口内的坐标值，也可以改为获取指定层的坐标:event.offsetX
        var mx = event.clientX,
            my = event.clientY;

        //开始为每个要动的元素设置左边距和上边距，以每个元素的不同zIndex值来区别移动量
        for (var i=0; i<oLi.length; i++) {
            //左边距和上边距的值可以随意调整
            oLi[i].style.marginLeft=(x-mx)/90*oLi[i].style.zIndex+'px';
            oLi[i].style.marginTop=(y-my)/70*oLi[i].style.zIndex+'px';
        }
    };
}
</script>