课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

js显示不了。救救孩子吧

来源：1-3 实例JS+DOM

qq_慕丝031510

2019-02-08 17:18


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


写回答 关注

2回答

DOM探索之基础详解篇

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

98372 学习 · 238 问题

查看课程

相似问题

js显示不了

回答 3

js不显示

回答 5

怎么显示不出来js效果

回答 4

怎么我的图片特效没出来？？救命~~

回答 3

是不是显示子节点的nodeName都会有#?

回答 1

打开慕课网App查看更多内容