首页 > 代码库 > JS中图片飞飞效果

JS中图片飞飞效果

2024-07-14 01:48:27   211人阅读

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

 

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

 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>
简单繁琐代码段

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

    从上面的代码中可以看出，其实每一个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>

 

 


联系
我们