仿京东 视差效果

废话不多说,直接上代码

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';
        }
    }
}

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

发表评论

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