码迷,mamicode.com
首页 > Web开发 > 详细

JS中图片飞飞效果

时间:2014-07-26 01:45:06      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   os   strong   

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

bubuko.com,布布扣bubuko.com,布布扣

 

    实现的基本思想:准备五个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基本上是没有大小而言。代码如下:

bubuko.com,布布扣
 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>

 

 

JS中图片飞飞效果,布布扣,bubuko.com

JS中图片飞飞效果

标签:style   blog   http   java   color   使用   os   strong   

原文地址:http://www.cnblogs.com/qigang/p/3866810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!