首頁 > 開發者 > JavaScript
JS中圖片飛飛效果
實現的基本思想：準備五個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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
