效果图：

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

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. Codeforces Round #416 (Div. 2) A. Vladik and Courtesy【思维/模拟】

    A. Vladik and Courtesy time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  2. Git-svn：用git管理svn仓库

    1. 将svn仓库中的项目导入本地git仓库 使用 git svn clone [svn_url] 命令即可完成从svn仓库导入本地,由于该命令会将svn仓库中所有版本的更新都会同步到本地仓库,如果项 ...

  3. PHPCMS V9双语站建设切换

    PHPCMS V9要做双语,很多同学都是迷茫的,在此特地分享我的双语制作步辶 我这种模式是把两个站点都改为HTML静态模式才可以实现 双语切换可分为两种模式: 1.解析二级域名来切换双语 解析二级域名 ...

  4. 文本分类四之权重策略：TF-IDF方法

    接下来,目的就是要将训练集所有文本文件(词向量)统一到同一个词向量空间中.在词向量空间中,事实上不同的词,它的权重是不同的,它对文本分类的影响力也不同,为此我们希望得到的词向量空间不是等权重的空间,而 ...

  5. Linux 内存管理之mmap详解

    找了好多,最后发现下面这篇时讲的比较通俗易懂的. Linux内存管理之mmap详解-heavent2010-ChinaUnix博客 http://blog.chinaunix.net/uid-2666 ...

  6. 一.数据结构&算法的引言+时间复杂度

    目录(contents): 1.什么是计算机科学?什么是算法? 2.如何形象化的理解算法? 3.什么是算法分析? 4.时间复杂度 5.数据结构 6.总结算法和数据结构之间的关联 一.什么是计算机科学? ...

  7. Hibernate 数据库方言配置；no dialect mapping for jdbc type:-9；生僻字

    最近因为生僻字在界面上显示为?: 主要原因是该字段在数据库中就是varchar类型,显示的就是?:如䶮(yan):现把varchar类型改为nvarchar类型:数据中能够正常显示: 但是Spring ...

  8. database homework1

    mysql> select * from teacher_info; +----+------+-----+--------+---------+ | id | name | age | sal ...

  9. Effective C++: 06继承与面向对象设计

    32:确定你的public继承塑模出is-a关系 以C++进行面向对象编程,最重要的一个规则是:public继承表示的是"is-a"(是一种)的关系. 如果令class D以pub ...

  10. nodeJs学习-15 mysql中间件下载与使用、基本用法

    下载mysql中间件(客户端):cnpm install mysql 链接数据库.查询示例: const mysql=require('mysql'); //1.连接 //createConnecti ...