效果图：

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

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

    </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>

【原生JS】滑动门效果的更多相关文章

  1. [Js]滑动门效果

    描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...

  2. JS切割图片-滑动门效果

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  6. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  7. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  8. js 滑动门的实现

    原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  10. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

随机推荐

  1. js 正则去除html代码

    function delHtmlTag(str){ return str.replace(/<[^>]+>/g,"");//去掉所有的html标记 }

  2. 洛谷 P2356 弹珠游戏

    题目链接:https://www.luogu.org/problemnew/show/P2356 题目 题目描述 MedalPluS 和他的小伙伴 NOIRP 发掘了一个骨灰级别的游戏——超级弹珠. ...

  3. 直白介绍卷积神经网络（CNN）【转】

    英文地址:https://ujjwalkarn.me/2016/08/11/intuitive-explanation-convnets/ 中文译文:http://mp.weixin.qq.com/s ...

  4. 【JZOJ3640】【COCI2014】utrka

    Mission 2<=N<=300,2<=M<=N∗(N−1) Solution SPFA. 由于只是二元关系,所以条件随便写. 具体来说,如果是u⇒v. 若v的最大领先时间还 ...

  5. css 垂直+水平居中

    垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...

  6. GitHub上的SliddingMenu滑动过程中卡顿问题的解决的方法

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wenyiqingnianiii/article/details/25123995 找了非常久,仅仅需 ...

  7. TyvjP1266 费解的开关

    P1266 费解的开关 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述     你玩过“拉灯”游戏吗?25盏灯排成一个5x5的方形.每一个灯都有一个开关,游戏 ...

  8. Python比较有用的小语法

    额,这是在Codeforces做题的时候从Virtual judge那儿学的 #ord()内置函数,将单个字符变为int#chr()内置函数,将int变为单个字符# for : else ( 或 wh ...

  9. 【转载】【软件安装】Source Insight 4.0常用设置

    1.Source Insight简介 Source Insight是一个面向软件开发的代码编辑器和浏览器,它拥有内置的对C/C++, C#和Java等源码的分析,创建并动态维护符号数据库,并自动显示有 ...

  10. Linux常用命令1 文件处理命令

    1.命令格式 1.用中括号括起来的内容都不是必填内容,碧如上图的选项和参数,有些命令不写选项和参数也可以执行 2.注意图中的简化选项与完整选项说明,完整选项要两个横杆-- 2.目录处理命令ls 1.文 ...