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>