废话不多说,直接上代码

window.onload = function() {

var oUl = document.getElementById('ul_container'),
l = oUl.offsetWidth / 2,
//外层UL的宽度除以2
t = oUl.offsetHeight / 2,
//外层UL的高度除以2
aLi = document.getElementsByTagName('li'); //获取Li
oUl.onmousemove = function(ev) {
var oEv = ev || event,
//将鼠标对象赋值给oEv 短路操作
iL = oEv.clientX,
//当前鼠标所在X轴的坐标
iT = oEv.clientY; //当前鼠标所在Y轴的坐标
//aLi[i].style.zIndex 层级
//通过不同的层级得到不同的移动范围,获得 视差效果
for (var i = 0; i < aLi.length; i++) { aLi[i].style.marginLeft = (iL - l) / 100 * aLi[i].style.zIndex + 'px'; aLi[i].style.marginTop = (iT - t) / 70 * aLi[i].style.zIndex + 'px'; } } }

查看示例:仿京东视差效果
下载源码:下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code