js - 圖標在網頁上漂浮移動效果

 

1. <!-- position: absolute -- 用瀏覽器的絕對位置的顯示div -->
2. <!-- <div>標籤要放在<script>標籤前面, 因爲執行順序的原因, 如果放後面js便無法找到<div>標籤。程序失敗 -->
4. <div id="float_icon" style="position: absolute">
5.     <a href="http://www.sohu.com" target="_blank"><img src="abc.jpg"></a>
6. </div>
8. <script type="text/javascript">
9.     var dirX = 1, dirY = 1;
10.     var posX = 0, posY = 0;
11.     
12.     /*
13.      * 兩種方法調用float_icon的屬性
14.      */
15.     document.body.all.float_icon.style.top = 0; 
16.     document.body.all.float_icon.style.left = 0;
17.     float_icon.style.visibility = "visible";
18.     
19.     window.setInterval("moveIcon()",1);
21.     function moveIcon() {
22.         posX += (2 * dirX);
23.         posY += (2 * dirY);
25.         
26.         float_icon.style.top = posY;
27.         float_icon.style.left = posX;
29.         if(posX < 1 || posX + float_icon.offsetWidth > document.body.clientWidth)
30.             dirX = -dirX;
31.         if(posY < 1 || posY + float_icon.offsetHeight > document.body.clientHeight)
32.             dirY = -dirY;
33.     }
34. </script>