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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。