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

怎么显示不出来js效果

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


提问者：qq_一曲离殇丶笑看人世繁华_3 2018-12-13 12:56

个回答