今天看到有人推荐 有js视差滚动效果的网站，其实视差滚动原理非常简单，无非把不同dom对象设置不同的移动速度，这样同时移动时可以非常明显的纵深感。

以我的上篇练习  为基础稍微添加一段代码就可以实现一个视差滚动。

直接上代码(html，全)  

新加代码段1

var data=[];......var obj = {	e:li[i],	l:parseInt(s.left),	t:parseInt(s.top),	s:parseInt(s.zIndex)}data.push(obj);

申请数组data，遍历时保存li的left top 和 index，动画时用到

新加代码段2

ul.onmousemove = function (e){
   for(var j in data){
   var step = data[j].s * 2; var numx = parseInt( ( ul.offsetWidth/2 - e.clientX) * step / ul.offsetWidth ); var numy = parseInt( ( ul.offsetHeight/2 - e.clientY) * step / ul.offsetHeight );         data[j].e.style.left = data[j].l - numx + 'px';         data[j].e.style.top = data[j].t - numy + 'px';         //console.log(numx);     }    }

这里关键地就是numx和numy；涉及到一个数学算法，不过不难理解，就是一个一元二次方程；num的大小就是鼠标相对页面的大小的固定比例。

 

ps：好像加不了demo页面 不知道大家有没有知道怎么加的。