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

实现的基本思想：准备五个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. Sort Array By Parity LT905

    Given an array A of non-negative integers, return an array consisting of all the even elements of A, ...

  2. STL基础1：vector

    #include <iostream> #include <vector> #include <algorithm> #include <numeric> ...

  3. HttpMethods(C#.net)

    HttpMethods  (C#.Net) using System; using System.Collections.Generic; using System.Linq; using Syste ...

  4. ubuntu samba共享后windows读写文件都是以nogroup问题

    添加smb账号 sudo smbpasswd -a xxx 如果报错:Failed to add entry for user xxx 则是因为这个账号不存在 添加成功以后,过一会就可以重新登陆了(u ...

  5. java学习第六周

    这是暑假学习的第六周,在这周我练习了老师给的例题,还是有一些地方看不懂,这周我对那些不懂的地方用看视频来进行解答,以及进行第二次复习. 下周我会对Java进行更加详细的复习,做好笔记,在LeetCod ...

  6. 【转】MongoDB导入导出以及数据库备份

    -------------------MongoDB数据导入与导出------------------- 1.导出工具:mongoexport     1.概念:         mongoDB中的m ...

  7. 2018.10.26 NOIP模拟 性感手枪（搜索）

    传送门 vis[x][y]vis[x][y]vis[x][y]记录这个点是否在之前被搜过,且被搜过的坐标是什么. 然后搜索的时候记录一个循环的下标和不循环的下标就行了. 代码

  8. idea环境下js、css中文乱码

    idea2018.2+tomcat8+java8+win10 异常:本地js和css通过tomcat发布时,在页面打印出的中文是乱码.而从数据库读取的中文数据和html的中文显示正常. 解决方法: 步 ...

  9. printk（）、查看开机log、查看实时log

    要将linux内核的带级别控制的printk内容打印出来,在命令行 输入 dmesg -n 8 就将所有级别的信息都打印出来 Linux命令:dmesg 功能说明:显示开机信息. 语 法:dmesg ...

  10. Jersey RESTful WebService框架学习(五)使用@BeanParam

    第一步:定义一个实体类 注意:实体类的属性需要加上FormParam注解 public class User { @FormParam("name") private String ...