用js实现图片滑动门效果

最新推荐文章于 2022-05-15 15:02:42 发布

chijiong5773

最新推荐文章于 2022-05-15 15:02:42 发布

阅读量267

点赞数

原文链接：https://my.oschina.net/cuiwenting423/blog/787989

版权

利用jsdom和css实现图片滑动门效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sliding doors</title>
    <style>
#container{
    height: 200px;
    margin: 0 auto;
    border-right: 1px solid #eee;
    border-bottom:  1px solid #eee;
    overflow: hidden;
    position: relative;
}
/* 实现img堆叠 */
#container img{
    position: absolute;
    display: block;
    left: 0;
    border-left: 1px solid #ddd;
}

    </style>
    <script>
      /*先定义页面加载完毕并请求的资源加载完毕后才执行*/
window.onload = function(){
    //先获得容器对象
    var box = document.getElementById('container');

    //获得图片节点对象集合
    var image =  box.getElementsByTagName('img');
    //想要设置图片的位置，得知道图片的宽度和堆叠的宽度
    //单张图片的宽度
    var imgwidth = image[0].offsetWidth;
    //设置掩藏们露出的宽度
    var exposeWidth = 160;
    //设置容器的总宽度 = 一张总宽度+ 其余个数*宽度
    var allWidth = imgwidth + (image.length-1)*exposeWidth;
    box.style.width = allWidth+'px' ;

    //图片归位，设置每道门的初始位置
    function setImgPos(){
        for (var i = 1, len = image.length-i; i < image.length; i++) {
            image[i].style.left = imgwidth + (i-1)*exposeWidth +"px";
        }
    }
    setImgPos();

    //为每道门绑定事件
    for (var i = 0; i < image.length; i++) {
            //使用立即调用的函数表达式，为了获取不同的i值
            (function(i){
                image[i].onmouseover = function(){
                    //先将每道门复位
                    setImgPos();
                    //打开门，处理第二张到当前图片即可
                    for (var j = 1; j <= i ;j++) {
                        mover(image[j],1,j);
                    }
                }
            })(i);
        } 
    function mover(obj,speed,index){
       /* transition-property：规定对哪个属性进行过渡

        transition-duration：定义过渡的时间，默认是0

        transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease

        transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0*/
        obj.style.transitionProperty = "left";
        obj.style.transitionDuration = speed +"s";
        obj.style.transitionTimingFunction = "ease";
        obj.style.transitionDelay = 0;
        obj.style.left = exposeWidth*index+"px";
    }   
}
     </script>
</head>
<body>
    <div id="container">
        <img src="../image/pic1.jpg" alt="图片1" title="图片1" width="300" height="200">
        <img src="../image/pic2.jpg" alt="图片2" title="图片2" width="300" height="200">
        <img src="../image/pic3.jpg" alt="图片3" title="图片3" width="300" height="200">
        <img src="../image/pic4.jpg" alt="图片4" title="图片4" width="300" height="200">
        <img src="../image/pic5.jpg" alt="图片5" title="图片5" width="300" height="200">
    </div>
</body>
</html>

效果如下：

转载于:https://my.oschina.net/cuiwenting423/blog/787989

chijiong5773

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用js实现图片滑动门效果

利用jsdom和css实现图片滑动门效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>sliding doors<...
复制链接

扫一扫