滑动门的例子

滑动门的例子：

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sliding doors</title>
    <link rel="stylesheet" href="styles/slidingdoors.css"/>
</head>
<body>
<div id="container">
    <img src="images/door1.jpg" alt="door1" title="door1"/>
    <img src="images/door2.webp" alt="door2" title="door2"/>
    <img src="images/door3.jpg" alt="door3" title="door3"/>
    <img src="images/door4.jpg" alt="door4" title="door4"/>
</div>

    <script src="scripts/slidingdoors.js"></script>
</body>
</html>

JavaScript:

window.onload = function(){//页面加载完毕。页面请求的所有资源加载完毕
    //容器对象
    var box = document.getElementById("container");
    //获得图片nodelist对象集合
    var imgs = box.getElementsByTagName("img");
    //单张图片的宽度
    var imgWidth = imgs[0].offsetWidth//属于DOM样式的内容
    //设置掩藏门体露出的宽度
    var exposeWidth = 160;
    //设置容器总宽度
    var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
    box.style.width = boxWidth + "px";//style是DOM中css属性设置的内容
    //设置每道门的初始位置
    function setImgsPos(){
        for(var i = 1; i < imgs.length; i++){
            imgs[i].style.left = imgWidth + (i - 1) * exposeWidth + "px";//
        }
    }
    setImgsPos();
    var translate = imgWidth - exposeWidth;
    for(var i = 1; i < imgs.length; i++) {
        //使用立即调用函数表达式，为了获得不同的i值
        (function(i){
            imgs[i].onmouseover = function(){
                //this.left = 0 + "px";
                //先将每道门复位
                setImgsPos();
                for(var j = 0; j <= i; j++){
                    imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px";
                }
            }
        })(i)

    }
}

css:

#container{
    height:280px;
    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;
}

 

posted @ 2015-07-31 15:38  darr  阅读(276)  评论(0)  编辑  收藏  举报