脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS中图片飞飞效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 实现的基本思想：准备五个img标签，为了方便控制都放在一个p里面，设置p的定位方式为 fixed，设置成这中定位方式主要是为了解决在页面出现滚动条的情况下，图片还能够跟随鼠标移动。然后再鼠标移动的时候，延时给每一个图片设置定位的left和top距离就OK了。HTML和CSS代码如下：
复制代码
1 <htML XMlns="https://www.w3.org/1999/xhtml">
2 <head>
3 <style tyPE="text/css" rel="stylesheet">
4 p{
5 width:100px;
6 height:80px;
7
8 posITion:fixed;
9 </style>
10 </head>
11
12 <body>
13 <p ><img src="images/tianshi.gif" alt="天使" /></p>
14 <p><img src="images/tianshi.gif" alt="天使" /></p>
15 <p><img src="images/tianshi.gif" alt="天使" /></p>
16 <p><img src="images/tianshi.gif" alt="天使" /></p>
17 <p><img src="images/tianshi.gif" alt="天使" /></p>
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 //获取页面上的p控件
9 var imgs = document.getelementsbytagname('p');
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 //获取页面上的p控件
9 var imgs = document.getElementsByTagName('p');
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脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JS中图片飞飞效果全部内容，希望文章能够帮你解决javascript代码实例教程-JS中图片飞飞效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。