js DOM--实现一个简易的滑动门特效

最新推荐文章于 2024-06-30 15:38:14 发布

小章鱼哥

最新推荐文章于 2024-06-30 15:38:14 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签：发布 html css

本文链接：https://blog.csdn.net/u014787301/article/details/51669590

版权

javascript 专栏收录该内容

107 篇文章 0 订阅

订阅专栏

要求：实现一个滑动门特效

效果：http://zhangyugege.github.io/slidedoor/
源码：https://github.com/zhangyugege/slidedoor

写html文档结构
写css样式
写js特效
gitpages发布

1.html文档结构

使用一个div包裹四张图片，便于定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="container">
        <img src="assets/door1.png" title="door1" alt="door1">
        <img src="assets/door2.png" title="door2" alt="door2">
        <img src="assets/door3.png" title="door3" alt="door3">
        <img src="assets/door4.png" title="door4" alt="door4">
    </div>
</body>
</html>

2.css样式

先引入<link href="css/reset.css" rel="stylesheet">

对#container进行相对定位。margin:0 auto实现水平居中。overflow实现边界溢出隐藏。设置高度和宽度。

然后对img进行绝对定位（相对于#container绝对定位），由于图片默认是display：inline的，所以把图片转成display：block（避免出现图片下方的小白条）。设置高度宽度和border。

#container{
            position: relative;
            margin: 0 auto;
            width: 960px;
            height: 478px;
            overflow: hidden;
        }
        img{
            position: absolute;
            display: block;
            width: 475px;
            height: 477px;
            border: solid 0.5px black;
        }

3.js特效

//在dom结构加载完成之后
window.onload=function(){
    //获取#container
    var box=document.getElementById('container');
    //获取imgs
    var imgs=box.getElementsByTagName('img');
    //通过offsetWidth获取每张图片的宽度
    var width=imgs[0].offsetWidth;
    //设置叠在一起的图片的宽度
    var tmpwidth=160;
    //初始化每张图片的定位。
    function init(){
    //第一张图片的left为0，第二张为width+0*tmpwidth，第三张为width+1*tmpwidth，以此类推。
        for(var i=0;i<imgs.length;i++){
            imgs[i].style.left=(i>0?(width+tmpwidth*(i-1)):0)+"px";
        }
    }
    //调用初始化函数
    init();

    //计算鼠标滑过时需要移动的图片移动的距离
    var translate=width-tmpwidth;
    for(var i=0;i<imgs.length;i++){
         //使用闭包，为每个图片添加mouseover事件
        (function(i){
            imgs[i].onmouseover=function(){
                //每次移动先初始化位置
                init();
                //除了第一张图片之外，第i张图片之前的图片都向左移动translate px。
                if(i>=1){
                //由于imgs[j].style.left是字符串（例如“10px”），使用parseInt把字符串转换为数字（“10px”-》10）
                    for(var j=1;j<=i;j++){
                        imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';
                    }
                }
            }
        })(i);

    }


}