当鼠标在界面上移动的时候，后面有一连串的图片跟随者一起飘动，效果如下：

实现的基本思想：准备五个img标签，为了方便控制都放在一个div里面，设置div的定位方式为 fixed，设置成这中定位方式主要是为了解决在页面出现滚动条的情况下，图片还能够跟随鼠标移动。然后再鼠标移动的时候，延时给每一个图片设置定位的left和top距离就OK了。HTML和CSS代码如下：

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <style type="text/css" rel="stylesheet">

             div{

                     width:100px;

                     height:80px;

                     position:fixed;

         </style>

     </head>

     <body>

             <div ><img src="data:images/tianshi.gif" alt="天使" /></div>

             <div><img src="data:images/tianshi.gif" alt="天使" /></div>

             <div><img src="data:images/tianshi.gif" alt="天使" /></div>

             <div><img src="data:images/tianshi.gif" alt="天使" /></div>

             <div><img src="data:images/tianshi.gif" alt="天使" /></div>

     </body>

 </html>

在JS中，给当前文档对象注册一个事件，之所以注册给document而不是body是因为，当页面中没有内容的时候，body基本上是没有大小而言。代码如下：

     <script type="text/javascript" >

         window.onload = function(){

             document.onmousemove = function(evt){

                 var e = evt || window.event;

                 //拿到鼠标当前的坐标

                 var x = parseInt(e.clientX) + 5;

                 var y = parseInt(e.clientY) + 5;

                 //获取页面上的div控件

                 var imgs = document.getElementsByTagName('div');

                 setTimeout(function(){

                         imgs[0].style.left = x + 'px';

                         imgs[0].style.top = y + 'px';

                 },0);

                 setTimeout(function(){

                     //    var j = i;

                         imgs[1].style.left = x + 'px';

                         imgs[1].style.top = y + 'px';

                 },50);

                 setTimeout(function(){

                         imgs[2].style.left = x + 'px';

                         imgs[2].style.top = y + 'px';

                 },100);

                 setTimeout(function(){

                         imgs[3].style.left = x + 'px';

                         imgs[3].style.top = y + 'px';

                 },150);

                 setTimeout(function(){

                         imgs[4].style.left = x + 'px';

                         imgs[4].style.top = y + 'px';

                 },200);

             };

         }

     </script>

简单繁琐代码段

通过上面的代码基本上就已经实现了我们想要的效果，但是非常的繁琐，如果想再添加几个图片，又需要重新的拷贝一大片，还需要计算时间等，不过比较容易理解。

从上面的代码中可以看出，其实每一个setTimeout中代码都是一样的，不同的是imags的索引而已，而且 在每一个setTimeout中传递的都是一个匿名函数。故可以通过一个循环来进行控制，在代码中setTimeout里面传递的是一个匿名函数，是需要引用外部变量的。但由于循环变量i在循环执行完成后已经是5，而在引用它的匿名函数中并不会被驻留，于是最后通过给一个自我执行的匿名函数传参的方式，来使每一个匿名函数来给里面的匿名函数(闭包)维护一个变量作用域。改良后的代码如下：

     <script type="text/javascript" >

         window.onload = function(){

             document.onmousemove = function(evt){

                 var e = evt || window.event;

                 //拿到鼠标当前的坐标

                 var x = parseInt(e.clientX) + 5;

                 var y = parseInt(e.clientY) + 5;

                 //获取页面上的div控件

                 var imgs = document.getElementsByTagName('div');

                 for(var i=0;i<imgs.length;i++){

                     //通过参数的形式把i传递过来，就能够将每一个i的值一直保存在内存中，直到闭包的匿名函数不在使用它

                     (function(j){

                         setTimeout(function(){

                             imgs[j].style.left = x + 'px';

                             imgs[j].style.top = y + 'px';

                         },j*40)

                     })(i);

                 };

             };

         }

     </script>

JS中图片飞飞效果的更多相关文章

  1. JS实现图片''推拉门''效果

    JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

  2. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  3. js实现图片局部放大效果

    图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...

  4. 3月题外：关于JS实现图片缩略图效果的一些小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  5. 3月题外：关于JS实现图片缩略图效果的一个小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  6. js实现图片幻灯片效果

    其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg ...

  7. js中图片获取src的正则

    链接: JavaScript 正则表达式:http://www.runoob.com/js/js-regexp.html js正则匹配出所有图片及图片地址src的方法:http://www.jb51. ...

  8. js中图片上传,多次上传同一张不生效

    在做图片上传的功能时, 使用删除功能删除了一张图片, 然后想重新上传原来删除的图片, 结果预览不显示, 也不能上传成功 解决办法, 在删除方法里置空input $("#id").f ...

  9. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. 好像leeceode题目我的博客太长了,需要重新建立一个. leecode刷题第二个

    376. Wiggle Subsequence               自己没想出来,看了别人的分析. 主要是要分析出升序降序只跟临近的2个决定.虽然直觉上不是这样. 455. 分发饼干     ...

  2. Java学习笔记：注解Annotation

    annotation的概念 In the Java computer programming language, an annotation is a form of syntactic metada ...

  3. 2017/2/24:Maven的pom jar war的区别

    首先,Run ——> Edit Configurations,这时候如下图: 然后点击左上角的加号,可以添加一个新的配置,如下图: 选择Maven,如下图: 下面填上自己的配置信息,点击appl ...

  4. win8 本地化

    先看个简单的案例:新时尚Windows8开发(6):资源 & 本地化 http://www.silverlightchina.net/html/windows8/study/2012/0902 ...

  5. 【Linux】CentOS 7.2 安装 MySQL 5.7.21 解压版

    安装环境/工具 1.Linux(CentOS 7.2版) 2.mysql-5.7.21-linux-glibc2.12-x86_64.tar.gz 安装步骤 1.下载mysql解压版(mysql-5. ...

  6. 20155312 2016-2017-2 《Java程序设计》第九周学习总结

    20155312 2016-2017-2 <Java程序设计>第九周学习总结 课堂内容总结 两个类有公用的东西放在父类里. 面向对象的三要素 封装 继承 多态:用父类声明引用,子类生成对象 ...

  7. JS高级- OOP-ES5

    1. OOP 面向对象三大特点: 封装,继承,多态 封装: 问题: 构造函数可重用代码和结构定义,但无法节约内存 为什么: 放在构造函数内的方法定义,每new一次,都会反复创建副本——浪费内存 解决: ...

  8. dfs序理解-hdu3887

    dfs序就是相当于把树转化成了一个区间,在区间上进行操作. void dfs(int u, int fa) { l[u]=++key; ; i=e[i].next) { int v=e[i].v; i ...

  9. Tarjan 割点，桥

    /* ggg ggg ggggggg ggggggg ggggggggggggggggggg ggggggggggggggg ggggggggggg ggggggg ggg g */ /* gyt L ...

  10. java笔记--问题总结

    1. 垃圾回收算法 标记-清除算法 标记-清除算法是最基本的算法,和他的名字一样,分为两个步骤,一个步骤是标记需要回收的对象.在标记完成后统一回收被标记的对象.这个算法两个问题.一个是效率问题,标记和 ...