Javascript实现飞动广告效果的方法

这篇文章主要介绍了Javascript实现飞动广告效果的方法,可实现广告窗口的浮动显示效果,且广告窗口具有关闭功能,需要的朋友可以参考下

本文实例讲述了Javascript实现飞动广告效果的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>飞动的广告</title> 
7. <style type="text/css"> 
8. body,div,p 
9. { 
10. margin:0; 
11. padding:0; 
12. font-size:14px; 
13. } 
14. #divMain 
15. { 
16. width:200px; 
17. height:800px; 
18. } 
19. </style> 
20. <script type="text/javascript"> 
21. var tmrID; 
22. var x = 1; 
23. var y = 1; 
24. function moveAD() { 
25. var divFly = document.getElementById("divFly"); 
26. var moveX = parseInt(divFly.style.left) + x * 5; 
27. var moveY = parseInt(divFly.style.top) + y * 5; 
28. //divFly.offsetWidth 
29. if ((moveX + divFly.offsetWidth) >= document.body.clientWidth) { 
30. x = -1; 
31. } 
32. if ((moveY + divFly.offsetHeight) >= document.body.clientHeight) { 
33. y = -1; 
34. } 
35. if (moveX <= 0) { 
36. x = 1; 
37. } 
38. if (moveY <= 0) { 
39. y = 1; 
40. } 
41. divFly.style.left = moveX; 
42. divFly.style.top = moveY; 
43. } 
44. function ClearTimer() { 
45. clearInterval(tmrID); 
46. } 
47. function fly() { 
48. tmrID = setInterval(moveAD, 20); 
49. } 
50. window.onload = function () { 
51. var divFly = document.getElementById("divFly"); 
52. divFly.onmouseover = function () { 
53. ClearTimer(); 
54. } 
55. divFly.onmouseout = function () { 
56. fly(); 
57. } 
58. fly(); 
59. } 
60. function closeAD() { 
61. ClearTimer(); 
62. var divFly = document.getElementById("divFly"); 
63. divFly.style.display = "none"; 
64. } 
65. </script> 
66. </head> 
67. <body> 
68. <div id="divMain"></div> 
69. <div id="divFly" style="position:absolute;top:0;left:0;border:1px solid green;"> 
70. <img src="../images/fly.gif" height="60px" width="60px" /> 
71. <p><a href="javascript:void(0)" onclick="closeAD()">关闭</a></p> 
72. </div> 
73. </body> 
74. </html> 

希望本文所述对大家的javascript程序设计有所帮助。