效果图：

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

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. SAE J2534介绍

    概要 J2534是一种针对与射频相关的ECU进行闪存编程的概念,而不用考虑ECU使用的通信协议.其目的是所有类型的ECU都应当只需一个工具(硬件设备),通常被称为通过式设备.J2534设备和ECU之间 ...

  2. jquery源码学习（一）——jquery结构概述以及如何合适的暴露全局变量

    jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...

  3. js 详解setTimeout定时器

    setTimeout: 定时器函数 第一个参数是匿名函数,第二个参数是延迟执行时间 setTimeout(function(){},time) 注意: 1.setTimeout函数是Window对象提 ...

  4. Python结合OpenCV学习资料

    1.sunny2038的专栏  http://blog.csdn.net/sunny2038 作者建立了一个学习系列.讲得非常具体,有非常多的主要的图像处理实例. 2. https://github. ...

  5. Codeforces 436C

    题目链接 C. Dungeons and Candies time limit per test 2 seconds memory limit per test 256 megabytes input ...

  6. 大数据技术之Hive

    第1章 Hive入门 1.1 什么是Hive Hive:由Facebook开源用于解决海量结构化日志的数据统计. Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提 ...

  7. Directx11教程(17) D3D11管线(6)

    原文:Directx11教程(17) D3D11管线(6)       VS shader输出clip空间的顶点位置及参数信息(比如颜色)到一个FIFO中,之后PA(primitive assembl ...

  8. 三、python-json、正则

    一.json   1.导入模块 import json 2.常用方法 dumps:序列化,把一个Python对象转化成json字符串 loads:反序列化,把json字符串转化成python dump ...

  9. poj3294 后缀数组

    后缀数组多个字符串问题. 先求出height[]数组,然后二分求最大的长度. 但是条件需要改变.如果出现次数大于一般那就满足.然后就要解决如何判断那一段属于其中一个字符串. 所以先处理出长度.并且不断 ...

  10. selenium 图片上传

    WebElement  file = driver.findElement(By.name("filename")); 给此元素设置值:file.sendKeys("E: ...