JS中图片飞飞效果

时间 2019-12-05

原文原文链接

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

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

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2     <head>
 3         <style type="text/css" rel="stylesheet">
 4  div{
 5  width:100px;
 6  height:80px;
 7                     
 8  position:fixed;
 9         </style>
10     </head>
11 
12     <body>    
13             <div ><img src="images/tianshi.gif" alt="天使" /></div>
14             <div><img src="images/tianshi.gif" alt="天使" /></div>
15             <div><img src="images/tianshi.gif" alt="天使" /></div>
16             <div><img src="images/tianshi.gif" alt="天使" /></div>
17             <div><img src="images/tianshi.gif" alt="天使" /></div>
18     </body>
19 </html>

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

 1     <script type="text/javascript" >
 2         window.onload = function(){  3             document.onmousemove = function(evt){  4                 var e = evt || window.event;  5                 //拿到鼠标当前的坐标
 6                 var x = parseInt(e.clientX) + 5;  7                 var y = parseInt(e.clientY) + 5;  8                 //获取页面上的div控件
 9                 var imgs = document.getElementsByTagName('div'); 10 
11                 setTimeout(function(){ 12                         imgs[0].style.left = x + 'px'; 13                         imgs[0].style.top = y + 'px'; 14                 },0); 15                 setTimeout(function(){ 16                     // var j = i;
17                         imgs[1].style.left = x + 'px'; 18                         imgs[1].style.top = y + 'px'; 19                 },50); 20                 setTimeout(function(){ 21                         imgs[2].style.left = x + 'px'; 22                         imgs[2].style.top = y + 'px'; 23                 },100); 24                 setTimeout(function(){ 25                         imgs[3].style.left = x + 'px'; 26                         imgs[3].style.top = y + 'px'; 27                 },150); 28                 setTimeout(function(){ 29                         imgs[4].style.left = x + 'px'; 30                         imgs[4].style.top = y + 'px'; 31                 },200); 32  }; 33  } 34     </script>

简单繁琐代码段

经过上面的代码基本上就已经实现了咱们想要的效果，可是很是的繁琐，若是想再添加几个图片，又须要从新的拷贝一大片，还须要计算时间等，不过比较容易理解。java

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

 1     <script type="text/javascript" >
 2         window.onload = function(){  3             document.onmousemove = function(evt){  4                 var e = evt || window.event;  5                 //拿到鼠标当前的坐标
 6                 var x = parseInt(e.clientX) + 5;  7                 var y = parseInt(e.clientY) + 5;  8                 //获取页面上的div控件
 9                 var imgs = document.getElementsByTagName('div'); 10                 
11                 for(var i=0;i<imgs.length;i++){ 12                     //经过参数的形式把i传递过来，就可以将每个i的值一直保存在内存中，直到闭包的匿名函数不在使用它
13                     (function(j){ 14                         setTimeout(function(){ 15                             imgs[j].style.left = x + 'px'; 16                             imgs[j].style.top = y + 'px'; 17                         },j*40) 18  })(i); 19  }; 20  }; 21  } 22     </script>