                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /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

源自：DOM探索之基础详解篇 1-3

关注问题我要回答

1361

操作

收起

2 回答

慕无忌7233295
2022-04-01

0 回复有任何疑惑可以回复我~

收起回答

qq_慕丝031510 提问者
2019-02-08

window.onload = function(){
    //容器对象
    var box = document.getElementById('container');
    //获得图片NodeList对象集合
    var imgs = box.getElementsByTagName('img');
    //单张图片的宽度
    var imgWidth = imgs[0].offsetWidth;
    //设置掩体门露出的宽度
    var exposeWidth = 360;
    //设置容器总宽度
    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[j].style.left = parseInt(imgs[j].style.left,10) - translate + 'px';
                }
            };
     })(i);
}
};