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

实现的基本思想：准备五个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. 开发apicloud模块遇到的几个梗

    2017-06-04 原来模块中不能的R.id.xxx,只能用UZResourcesIDFinder.getResIdID("mo_minivr_framecontainer") ...

  2. autohotkey快捷键

    ;已经基本修复了输入带shift的时候跟输入法中英文切换之间的冲突 SetStoreCapslockMode, off SetKeyDelay, ^CapsLock:: #UseHook ;用这个和下 ...

  3. 如何在Eclipse下安装SVN插件——subclipse

    如何在Eclipse下安装SVN插件——subclipse | 浏览:2799 | 更新:2014-09-20 22:39 1 2 3 4 5 6 分步阅读 版本控制是开发人员必不可少的工具,而SVN ...

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

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

  5. 【Linux】DNS服务-BIND基础配置（二）

    BIND简介 现在使用最为广泛的DNS服务器软件是BIND(Berkeley Internet Name Domain),最早有伯克利大学的一名学生编写,现在最新的版本是9,有ISC(Internet ...

  6. 在myeclipse上发布自己的webservice

       什么是WebServices? 它是一种构建应用程序的普遍模型,可以在任何支持网络通信的操作系统中实施运行;它是一种新的web应用程序分支,是自包含.自描述.模块化的应用,可以发布.定位.通过w ...

  7. 百度地图经纬度和地址互转（Java代码）

    这是基于springmvc+mybatis 的一个controller.如果不是这个框架,可以把方法实体抽到自己写的一个类中,然后再测试 package com.uwitec.controller.s ...

  8. DevOps：软件架构师行动指南（文摘）

    第一部分 背景 第1章 DevOps是什么 第二部分 部署流水线 第三部分 横切关注点 第四部分 案例研究 第五部分 走向未来

  9. eclipse 创建servlet 出现继承 HttpServlet 报红线

    eclipse创建servlet出现红线: 解决方案1,鼠标右键项目 -> 鼠标右击项目——>Build Path——> 点击comfigure Build Path进入-----& ...

  10. verilog中的多维数组

    reg  arrayb [7:0] [0:255] ;//二维数组.