• 【原生JS】滑动门效果


    效果图:

    思路:通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现。

    HTML:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>

    CSS:

        <style>
            #box{border:1px gray solid; margin: 0 auto; position:relative; overflow:hidden;}
            img{width:100px; float:left; position:absolute; left:0;}
        </style>

    JS:

        <script type="text/javascript">
            onload = function(){
            var box = document.getElementById('box');
            var imgs = box.getElementsByTagName('img');
            var imgw = imgs[0].offsetWidth;
            var translate = imgs[0].offsetWidth * 0.8;
            var translate2 = imgs[0].offsetWidth * 0.2;
            box.style.width = imgs[0].offsetWidth + translate * (imgs.length-1) + 'px';
            box.style.height = imgs[0].offsetHeight + 'px';
            var reset = function(){for(var i=1,l=imgs.length;i<l;i++){       //重置为开始的布局
                imgs[i].style.left = imgw + (i - 1) * translate + 'px';
            }}
            reset();
            for(var i=0,l=imgs.length;i<l;i++){
                (function(i){
                    imgs[i].onmouseover = function(){                         
                        if(this.getAttribute('offset') == 'active'){return;}                              //当移动鼠标至目标元素时重置布局并重新从目标位置左侧内容左移
                        reset();    
                        for(var j=1;j<=i;j++){
                            imgs[j].style.left = parseInt(imgs[j].style.left,10) - translate2 + 'px';
                        }
                        for(var k=0;k<imgs.length;k++){
                            imgs[k].setAttribute('offset','off');
                        }
                        this.setAttribute('offset','active');
                    };
                })(i);
            }
            }
        </script>
        <body>
            <div id="box">
                <img src="img/1.jpg" alt="水云姬" title="不良人女帝"/>
                <img src="img/2.jpg" alt="李星云" title="不良人男主"/>
                <img src="img/3.jpg" alt="苗疆少女" title="不良人后宫"/>
                <img src="img/4.jpg" alt="张子凡" title="不良人男二"/>
                <img src="img/5.jpg" alt="叶林轩" title="不良人女二"/>
            </div>
        </body>
    </html>
    转载请指明出处!
  • 相关阅读:
    asp.net core 使用 StaticFiles 中间件 (不完整翻译)
    asp.net core 通过 TeamCity 实现持续集成笔记
    Swashbuckle for asp.net core 配置说明
    # TypeScript 中如何确保 this 的正确性
    MySql + EF6 + .Net Core
    ASP.NET Core + EF6
    数据库设计 Assignment 02
    NYOJ 8 一种排序
    NYOJ 23.取石子(一)
    邻接表(C++)
  • 原文地址:https://www.cnblogs.com/GruntFish/p/6705764.html
Copyright © 2020-2023  润新知