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

实现的基本思想：准备五个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. HTML5基础实例

    <!DOCTYPE html> <!--声明HTML文档--> <html> <head> <title>我的网页</title> ...

  2. System.load()与System.loadLibrary()

    Java load 和 loadlibrary方法的区别 1.  相同点: 两个方法都是用来装载dll文件,不论是JNI库文件还是非JNI库文件.本地方法在被调用时都需要通过这两发方法之一将其加载至内 ...

  3. unity中的构造函数

    避免使用构造函数 不要在构造函数中初始化任何变量,使用Awake或Start实现这个目的.即使是在编辑模式中Unity也自动调用构造函数,这通常发生在一个脚本被编译之后,因为需要调用构造函数来取向一个 ...

  4. 利用Delphi-cross-socket 库提升kbmmw 跨平台开发

    以前我写过了,通过httpsys 提升windows 下,delphi 多层应用.随着delphi 10.2 对linux 的支持,很多人也想在linux 下 发布kbmmw 服务器,但是官方仅通过i ...

  5. 2018.11.03 NOIP模拟 树（长链剖分优化dp）

    传送门 考虑直接推式子不用优化怎么做. 显然每一个二进制位分开计算贡献就行. 即记录fi,jf_{i,j}fi,j​表示距离iii这个点不超过jjj的点的每个二进制位的0/10/10/1个数. 但直接 ...

  6. 使用docker 安装 GITLIB

    在安装 gitlib 社区版时,配置老不成功,改成使用docker安装 比较顺利,省事. 1外部卷配置 docker 需要配置一些卷在外部,创建一下git的目录 我们创建一个在home下 创建一个gi ...

  7. ACM-ICPC 2018 沈阳赛区网络预赛 B Call of Accepted(表达式求值）

    题目链接:https://nanti.jisuanke.com/t/31443 相关前置链接 https://www.cnblogs.com/dolphin0520/p/3708602.html ht ...

  8. Android 从相机或相册或获取图片（转）

    参考: https://github.com/ASDbobo/GetPhotoDemo Android 8.0 调取系统摄像头和相册选择图片 9.3 使用Camera拍照

  9. boost--ref

    1.ref简介 reference_wrapper包含在ref库中,它是引用包装器类型,即其内部包装了引用. 成员函数get().get_pointer()分别可以获得被包装的引用和其指针.使用需要包 ...

  10. maven打包到私服，打的是war包，好郁闷

    jenkins打完包上传到私服以后,发现只有war包,然而并木有别人想要的jar包,郁闷之极啊! 然后把公司的项目做了对比,发现这个正常的能上传jar包的项目的与我的另一个项目有点出入: 正常:  异 ...