效果图：

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

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. Filter详解（转）

    以前以为Filter只是一个特殊点的Servlet,用进只需在web.xml中配置一下拦截路径就可以了,可经过这两天的深入学习,才知道以前对Filter类的了解和使用都太过浅薄了. 在网上看了很多篇相 ...

  2. OWIN启动类检测

    每个OWIN应用程序都有一个启动类,可以在这个类里为应用程序管道指定组件.有不同的方式可以将启动类与运行时关联起来,这依赖于选择的托管模型(OwinHost,IIS,IIS-Express).本教程中 ...

  3. 手把手教你实现一个通用的jsonp跨域方法

    什么是jsonp JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1 ...

  4. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  5. jsp之jstl（展示所有商品、重写登录案例）

    jsp之jstl jstl: jsp标准的标签库语言,apache的,是用来替代java脚本 使用步骤: 1.导入jar包 (jstl.jar和standard.jar) 2.在页面上导入标签库 &l ...

  6. JS判断PC 手机端显示不同的内容

    方法一: function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android ...

  7. request.getcontextPath() 详解 和 <link标签>

    classpath:只会到你的class路径中查找找文件; classpath*:不仅包含class路径,还包括jar文件中(class路径)进行查找. 绝对路径: D:\磊弟资料\最代码\智父子考试 ...

  8. springboot(十九)使用actuator监控应用【转】【补】

    springboot(十九)使用actuator监控应用 微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的 ...

  9. ajax嵌套陷阱

    ajax嵌套陷阱 $('.ajaxupd').click(function () { $('.shadow1').show(); $('.update').show(); var tds=$(this ...

  10. lower_bounder()和upper_bound()的函数

    lower_bound() .upper_bound()都运用于有序区间的二分查找. ForwardIter lower_bound(ForwardIter first, ForwardIter la ...