问答详情
源自：1-3 实例JS+DOM

js显示不了。救救孩子吧


window.onload=function(){
    //容器对象
    var box=document.getElementById('container');
    //获得图片NodeList对象集合
    var imgs=box.getElementsByTagName('img');
    //单张图片的宽度
    var imgwidth=imgs[0].offsetWidth;
    //设置掩体门露出的宽度
    var exposewidth=160;
    //设置容器总宽度
    var boxwidth=imgwidth+(imgs.length-1)*exposewidth;
    box.style.width=boxwidth+'px';
    //设置每道门的初始位置
    function setImgsPos(){
        for (var i = 1, len = imgs.length; i < len; i++) {
            imgs[i].style.left = imgwidth + exposewidth * (i - 1) + 'px';
        }
    }
    setImgsPos();
    //计算每道门打开时应移动的距离
    var translate=imgwidth-exposewidth;
    //为每道门绑定事件
    for(var i= 0,len=imgs.length;i<len;i++) {
        //使用立即调用的使用立即调用的函数表达式，为了获得不同的i值
        (function(i){
            imgs[i].onmouseover = function () {
                //先将每道门复位
                setImgsPos();
                //打开门
                for(var j=1;j<=i;j++){
                    imgs.style.left=parseInt(imgs.style.left,10)-translate+'px';
                }
            }
     })(i);
}
}


提问者：qq_慕丝031510 2019-02-08 17:18

个回答