超好用的网页浮动广告代码

Html代码  

1. <div id='your_id' style='z-index: 100; left: 2px; width: 108px; position: absolute; top: 43px; height: 108px; visibility: visible;'>  

2.     <a href='http://codingstandards.iteye.com/' target='_blank'>  

3.         <img src='http://124.232.156.170/nxsyzx/zhaosheng/baoming.gif' width='108' height='108' border='0'/>  

4.     </a>  

5. </div>  

 

 

用于控制图片运动的JS代码

 

Js代码  

1. (function(id){  

2. var xPos = 2;  

3. var yPos = 43;   

4. var step = 1;  

5. var delay = 30;   

6. var height = 0;  

7. var Hoffset = 0;  

8. var Woffset = 0;  

9. var yon = 0;  

10. var xon = 0;  

11. var pause = true;  

12. var interval;  

13. var img1 = document.getElementById(id);  

14. img1.style.top = yPos;  

15. function changePos() {  

16.     width = document.body.clientWidth;  

17.     height = document.body.clientHeight;  

18.     Hoffset = img1.offsetHeight;  

19.     Woffset = img1.offsetWidth;  

20.     img1.style.left = xPos + document.body.scrollLeft;  

21.     img1.style.top = yPos + document.body.scrollTop;  

22.     if (yon)   

23.         {yPos = yPos + step;}  

24.     else   

25.         {yPos = yPos - step;}  

26.     if (yPos < 0)   

27.         {yon = 1;yPos = 0;}  

28.     if (yPos >= (height - Hoffset))   

29.         {yon = 0;yPos = (height - Hoffset);}  

30.     if (xon)   

31.         {xPos = xPos + step;}  

32.     else   

33.         {xPos = xPos - step;}  

34.     if (xPos < 0)   

35.         {xon = 1;xPos = 0;}  

36.     if (xPos >= (width - Woffset))   

37.         {xon = 0;xPos = (width - Woffset);   }  

38.     }  

39.       

40.     function start() {  

41.         img1.visibility = 'visible';  

42.         interval = setInterval(changePos, delay);  

43.     }  

44.     function pause_resume() {  

45.         if(pause) {  

46.             clearInterval(interval);  

47.             pause = false;  

48.         } else {  

49.             interval = setInterval(changePos,delay);  

50.             pause = true;   

51.         }  

52.     }  

53.     start();  

54. })('your_id');  

 

 

PS：本文中的代码参考了网络上常用的浮动广告代码，但做了一些修改，更加实用。它限制了变量的作用域，能够直接嵌入到某些门户CMS系统中。

本文转自 IT阿飞 51CTO博客，原文链接:http://blog.51cto.com/itafei/1791859