用javascript实现sliding door 的效果

来源：互联网发布：vb书籍pdf 编辑：程序博客网时间：2024/06/07 10:13

index.html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>sliding doors</title>    <link type="text/css" href="CSS/css.css" rel="stylesheet">    <link type="text/css" href="CSS/reset.css" rel="stylesheet">    <script src="JS/slidedoor.js"></script></head><body>       <div id="container">           <img src="images/door1.png" alt="1080P神器" title="1080P神器">           <img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核">           <img src="images/door3.png" alt="四核5寸" title="四核5寸">           <img src="images/door4.png" alt="5.7寸机皇" title="5.7寸机皇">       </div></body></html>

css样式表代码

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

js代码

/** * Created by Administrator on 2016/3/19. */window.onload=function(){    //得到box容器的大小    var  box=document.getElementById("container");    //得到NodeList集合所有的元素    var imgList=document.getElementsByTagName("img");    //得到图片的宽度    var imgWidth=imgList[0].offsetWidth;    //设置图片露出的宽度    var exposeWidth=170;    //设置box盒子的宽度    var boxWidth=imgWidth+(imgList.length-1)*exposeWidth;    box.style.width=boxWidth+'px';    //设置每一张图片的初始位置    function  setImgsPosition(){       for (var i= 1,len=imgList.length;i<len;i++){           imgList[i].style.left=imgWidth+exposeWidth*(i-1)+'px';       }    };    setImgsPosition();    //计算每一道门打开时应该移动的距离    var  translate=imgWidth-exposeWidth;    //为每一道门绑定事件    for(var i= 0,len=imgList.length;i<len;i++){        //使用立即调用函数        (function(i){             //为每一张图片绑定一个事件            imgList[i].onmouseover=function(){                setImgsPosition();                for(var j=1;j<=i;j++){                    imgList[j].style.left=parseInt(imgList[j].style.left,10)-translate+'px';                }       }        })(i);    }}

效果如下

0 0