var imgWidth = imgs[0].offsetWidth;/*这是动态获取的吗??还是固定值*/

来源:1-3 实例JS+DOM

记得喝水

2015-11-28 13:07

  1. var imgWidth = imgs[0].offsetWidth;/*这是动态获取的吗??还是固定值??*/

  2. 代码中的每一张图片的offsetWidth被其他的图片覆盖的部分算吗?是怎么计算了。我知道offsetWidth 是width+padding+border,但是这里有些不懂。

  3. 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[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
                    }
                };
            })(i);
        }
    };


写回答 关注

1回答

  • echo_kinchao
    2015-11-28 15:55:02

    是动态获取 但是如果你dom结构不变的话  她就是固定的

DOM探索之基础详解篇

要知道前端大牛都是从精通DOM开始的,全面讲解DOM的基础知识

98374 学习 · 238 问题

查看课程

相似问题