效果图：

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

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的运用

    1.定义一个方法,传入一个string类型的参数,然后将string的每个字符间加个空格返回,比如: spacify('hello world') // => 'h e l l o  w o r ...

  2. Laravel5.5/6 报错call to undefined function openssl cipher iv length()

    在安装laravel5.5后, 访问显示报错. call to undefined function openssl cipher iv length() 经查为php7.1的OpenSSL扩展加载失 ...

  3. 理解async和await

    async 是“异步”的简写,而 await 可以认为是 async wait 的简写. 所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执 ...

  4. OpenLayers使用点要素作为标记

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  5. 蚁群算法MATLAB解VRP问题

    Excel  exp12_3_2.xls内容: ANT_VRP函数: function [R_best,L_best,L_ave,Shortest_Route,Shortest_Length]=ANT ...

  6. 【django后端分离】mysql原生查询命令后，RawQueryset类型的自定义序列化返回json格式

    1:设置mysql原生分页 # 监控系统首页显示分页 def MyPagination(limitid,offsetid): limitid =str(limitid) offsetid =str(o ...

  7. Codeforces Round #309 (Div. 2) A. Kyoya and Photobooks【*组合数学】

    A. Kyoya and Photobooks time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  8. Android基础&进阶

    基础总结篇之一:Activity生命周期 基础总结篇之二:Activity的四种launchMode 基础总结篇之三:Activity的task相关 基础总结篇之四:Service完全解析 基础总结篇 ...

  9. 洛谷3861八月月赛A题解

    链接 用f[i][j]表示乘积为i的,包含的最大数小于等于j时的方案总数 我们先考虑所用的数为1到n的情况 最后的答案就是f[n][n]-1 转移时考虑f[i][j]可以转移到的状态 显然f[i][j ...

  10. PHP实现选择排序的方法

    选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理如下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然 ...