效果图

通过鼠标移动实现图片滑动门效果

代码

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sliding doors</title>
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/slidingdoors.css">
</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>

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

css：

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

JavaScript：

// 定义页面加载完毕  onload会等到所有页面元素加载完毕以及页面资源加载完毕
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 + exposeWidth * ( imgs.length - 1 );
    box.style.width = boxWidth + "px";

    // 设置每道门的初始位置
    function setImgsPos() {
        for( var i = 1 ; i < imgs.length ; i++ ) {
            imgs[i].style.left = ((i - 1) * exposeWidth + imgWidth) + "px";
        }
    }
    setImgsPos();

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

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

DOM--滑动门案例

效果图

代码