用javascript实现sliding door 的效果

最新推荐文章于 2025-05-15 12:25:38 发布

原创最新推荐文章于 2025-05-15 12:25:38 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

CSS3 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种利用HTML、CSS及JavaScript实现的滑动门效果。通过预设的图片和特定的代码，使得图片能够像门一样逐个滑开，展示了前端技术在交互设计上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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



}

效果如下