怎么显示不出来js效果-慕课网

怎么显示不出来js效果

来源：1-3 实例JS+DOM

qq_一曲离殇丶笑看人世繁华_3

2018-12-13 12:56

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传送门显示图片</title>
    <link rel="stylesheet" href="css/door.css" type="text/css"/>
    <link rel="stylesheet" href="css/reset.css" type="text/css"/>
    <script src="script/door.js"></script>
</head>
<body>
<div id="container">
     <img src="images/door1.png" />
      <img src="images/door2.png"/>
      <img src="images/door3.png"/>
      <img src="images/door4.png"/>
</div>
</body>
</html>

#container{height: 477px;margin: 0 auto;border-right: 1px solid #ccc;
              border-bottom: 1px solid #ccc;overflow: hidden;position: relative;}
#container img{position: absolute;display: block;left:0;border-left:1px solid #ccc;}

window.onload= function()
{
    //容器对象
    var box = document.getElementById('container');
    //获得图片NodeList对象集合
    var imgs = box.getElementsByClassName('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,length=imgs.width;i<len;i++)
       {
           imgs[i].style.left=imgWidth+(i-1)*exposeWidth;
       }
    }
    setImgsPos();

    //计算每道门打开时应移动的距离
    var translate=imgWidth-exposeWidth;

    //为每道门绑定事件
    for(var i=0,len=imgs.length;i<len;i++)
    {
        //使用立即调用的函数表答式，为获得不同的值
        (function (i) {
            imgs[i].onmouseover=function () {
                //先将每道门复位
                setImgsPos();
                //打开门
                for(var j=1;j<=i;j++)
                {
                    imgs[i].style.left=parseInt(imgs[i].style.left,10)-translate+'ps';
                }
            }
        })(i);
    }
};

写回答关注

3回答

DOM探索之基础详解篇

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

98374 学习 · 238 问题

查看课程

相似问题

js不显示

回答 5

js显示不了

回答 3

js显示不了。救救孩子吧

回答 2

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

回答 3

怎么我代码一样的，浏览器只显示图片，没有显示其他的结果？

回答 3

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