【javascript】学习总结——漂浮广告特效

漂浮广告特效代码：

Code:

1. <script type="text/javascript" language="javascript">   
2.     //定义全局变量   
3.     var xPos=0;//x轴坐标   
4.     var yPos=0;//Y轴坐标   
5.     var step=1;//图片移动速度   
6.     var yon=0;//设置图片在Y轴移动的方向   
7.     var xon=0;//设置图片在X轴移动的方向   
8.        
9.        
10.     function changePos(){   
11.         var img=document.getElementById("float");   
12.         var width=document.body.clientWidth;//浏览器宽度   
13.         var height=document.body.clientHeight;//浏览器高度   
14.         var Hoffset=img.offsetHeight;//漂浮图片高度   
15.         var Woffset=img.offsetWidth;//漂浮图片宽度   
16.         img.style.left=xPos+document.body.scrollLeft;//漂浮广告距浏览器左侧的位置   
17.         img.style.top=yPos+document.body.scrollTop;//漂浮广告距浏览器顶端的位置   
18.         if(yon==0){   
19.             yPos=yPos+step; //漂浮图片在y轴方向上向下移动   
20.         }else{   
21.             yPos=yPos-step;//漂浮图片在y轴方向上向上移动   
22.         }   
23.         //如果漂浮图片飘到浏览器顶端时，设置图片在y轴方向上向下移动   
24.         if(yPos<0){   
25.             yon=0;   
26.             yPos=0;   
27.         }   
28.         //如果漂浮图片飘到浏览器低端时，设置图片在y轴方向上向上移动   
29.         if(yPos>=height-Hoffset){   
30.             yon=1;   
31.             yPos=(height-Hoffset);   
32.         }   
33.         if(xon==0){   
34.             xPos=xPos+step;//漂浮图片在x轴方向向右移动   
35.         }else{   
36.             xPos=xPos-step;//漂浮图片在x轴方向向左移动   
37.         }   
38.         //如果漂浮图片飘到浏览器左侧时，设置图片在x轴方向上向右移动   
39.         if(xPos>=(width-Woffset)){   
40.             xon=1;   
41.             xPos=(width-Woffset);   
42.         }   
43.         setTimeout("changePos()",30);   
44.     }   
45.     window.οnlοad=changePos();   
46. </script>