火狐、Google及びIEに対応するJavascript浮遊広告コード

20938 ワード
ブラウザ対応 浮遊広告 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    5. 
   
   
   
   
  5. <title>    </title> 
    6. 
   
   
   
   
  6. </head> 
    7. 
   
   
   
   
  7.  
    8. 
   
   
   
   
  8. <body> 
    9. 
   
   
   
   
  9. <div id="oImg" style="position: absolute; z-index: 100; top: 0; left: 0; width: 125px; height: 125px; background: #FF9900; color: #FFFFFF;"><a href="http://www.bbs.zj.com/" target="_blank"> 
    10. 
   
   
   
   
  10. <img src="http://ucenter.51cto.com/avatar.php?uid=6345222&size=middle" width="125px" height="125px" /> 
    11. 
   
   
   
   
  11.  </a></div> 
    12. 
   
   
   
   
  12. <script language="javascript" type="text/javascript"> 
    13. 
   
   
   
   
  13. <!-- 
    14. 
   
   
   
   
  14.     var floatImg = document.getElementById("oImg");  
    15. 
   
   
   
   
  15.     var delay = 10; //           ，        ； 
    16. 
   
   
   
   
  16.     var speed = 1; //           ，        ； 
    17. 
   
   
   
   
  17.     var flagX = 0; 
    18. 
   
   
   
   
  18.     var flagY = 0; 
    19. 
   
   
   
   
  19.      
    20. 
   
   
   
   
  20.     function toPixel(str1) { 
    21. 
   
   
   
   
  21.     //            px，        。 
    22. 
   
   
   
   
  22.         var oldLen = str1.length; 
    23. 
   
   
   
   
  23.         var newLen = oldLen - 2; 
    24. 
   
   
   
   
  24.          
    25. 
   
   
   
   
  25.         str2 = str1.slice(0, newLen); 
    26. 
   
   
   
   
  26.         str3 = parseInt(str2); 
    27. 
   
   
   
   
  27.          
    28. 
   
   
   
   
  28.         return str3; 
    29. 
   
   
   
   
  29.     } 
    30. 
   
   
   
   
  30.      
    31. 
   
   
   
   
  31.     function flowImg() { 
    32. 
   
   
   
   
  32.         var bWidth = document.body.clientWidth; 
    33. 
   
   
   
   
  33.         var bHeight = document.body.clientHeight; 
    34. 
   
   
   
   
  34.         var bLeft = document.body.scrollLeft; 
    35. 
   
   
   
   
  35.         var bTop = document.body.scrollTop; 
    36. 
   
   
   
   
  36.          
    37. 
   
   
   
   
  37.         var iWidth = floatImg.offsetWidth; 
    38. 
   
   
   
   
  38.         var iHeight = floatImg.offsetHeight; 
    39. 
   
   
   
   
  39.         var iLeft = toPixel(floatImg.style.left); 
    40. 
   
   
   
   
  40.         var iTop = toPixel(floatImg.style.top); 
    41. 
   
   
   
   
  41.          
    42. 
   
   
   
   
  42.         //           
    43. 
   
   
   
   
  43.         if(iLeft < (bWidth - iWidth) && flagX == 0) { 
    44. 
   
   
   
   
  44.             floatImg.style.left = (iLeft + speed) + "px"; 
    45. 
   
   
   
   
  45.         } 
    46. 
   
   
   
   
  46.         else if(iLeft >= (bWidth - iWidth) && flagX ==0) { 
    47. 
   
   
   
   
  47.             flagX = 1; 
    48. 
   
   
   
   
  48.         } 
    49. 
   
   
   
   
  49.         else if(iLeft > 0 && flagX == 1) { 
    50. 
   
   
   
   
  50.             floatImg.style.left = (iLeft - speed) + "px"; 
    51. 
   
   
   
   
  51.         } 
    52. 
   
   
   
   
  52.         else if(0 >= iLeft && flagX == 1) { 
    53. 
   
   
   
   
  53.             flagX = 0; 
    54. 
   
   
   
   
  54.         } 
    55. 
   
   
   
   
  55.          
    56. 
   
   
   
   
  56.         //           
    57. 
   
   
   
   
  57.         if(iTop < (bHeight - iHeight) && flagY == 0) { 
    58. 
   
   
   
   
  58.             floatImg.style.top = (iTop + speed) + "px"; 
    59. 
   
   
   
   
  59.         } 
    60. 
   
   
   
   
  60.         else if(iTop >= (bHeight - iHeight) && flagY ==0) { 
    61. 
   
   
   
   
  61.             flagY = 1; 
    62. 
   
   
   
   
  62.         } 
    63. 
   
   
   
   
  63.         else if(iTop > 0 && flagY == 1) { 
    64. 
   
   
   
   
  64.             floatImg.style.top = (iTop - speed) + "px"; 
    65. 
   
   
   
   
  65.         } 
    66. 
   
   
   
   
  66.         else if(0 >= iTop && flagY == 1) { 
    67. 
   
   
   
   
  67.             flagY = 0; 
    68. 
   
   
   
   
  68.         } 
    69. 
   
   
   
   
  69.     } 
    70. 
   
   
   
   
  70.      
    71. 
   
   
   
   
  71.     var imgInterval = setInterval("flowImg()", delay); 
    72. 
   
   
   
   
  72.     floatImg.onmouseover = function() {clearInterval(imgInterval);} 
    73. 
   
   
   
   
  73.     floatImg.onmouseout = function() {imgInterval = setInterval("flowImg()", delay);} 
    74. 
   
   
   
   
  74. --> 
    75. 
   
   
   
   
  75. </script> 
    76. 
   
   
   
   
  76.  
    77. 
   
   
   
   
  77. <p>&nbsp;</p> 
    78. 
   
   
   
   
  78. <p>&nbsp;</p> 
    79. 
   
   
   
   
  79. <p>&nbsp;</p> 
    80. 
   
   
   
   
  80. <p>&nbsp;</p> 
    81. 
   
   
   
   
  81. <p>&nbsp;</p> 
    82. 
   
   
   
   
  82. <p>&nbsp;</p> 
    83. 
   
   
   
   
  83. <p>&nbsp;</p> 
    84. 
   
   
   
   
  84. <p>&nbsp;</p> 
    85. 
   
   
   
   
  85. <p>&nbsp;</p> 
    86. 
   
   
   
   
  86. <p>&nbsp;</p> 
    87. 
   
   
   
   
  87. <p>&nbsp;</p> 
    88. 
   
   
   
   
  88. <p>&nbsp;</p> 
    89. 
   
   
   
   
  89. <p>&nbsp;</p> 
    90. 
   
   
   
   
  90. <p>&nbsp;</p> 
    91. 
   
   
   
   
  91. <p>&nbsp;</p> 
    92. 
   
   
   
   
  92. <p>&nbsp;</p> 
    93. 
   
   
   
   
  93. <p>&nbsp;</p> 
    94. 
   
   
   
   
  94. <p>&nbsp;</p> 
    95. 
   
   
   
   
  95. <p>&nbsp;</p> 
    96. 
   
   
   
   
  96. <p>&nbsp;</p> 
    97. 
   
   
   
   
  97. <p>&nbsp;</p> 
    98. 
   
   
   
   
  98. <p>&nbsp;</p> 
    99. 
   
   
   
   
  99. <p>&nbsp;</p> 
    100. 
   
   
   
   
  100. <p>&nbsp;</p> 
    101. 
   
   
   
   
  101. <p>&nbsp;</p> 
    102. 
   
   
   
   
  102. <p>&nbsp;</p> 
    103. 
   
   
   
   
  103. <p>&nbsp;</p> 
    104. 
   
   
   
   
  104. <p>&nbsp;</p> 
    105. 
   
   
   
   
  105. <p>&nbsp;</p> 
    106. 
   
   
   
   
  106. <p>&nbsp;</p> 
    107. 
   
   
   
   
  107. <p>&nbsp;</p> 
    108. 
   
   
   
   
  108. <p>&nbsp;</p> 
    109. 
   
   
   
   
  109. <p>&nbsp; </p> 
    110. 
   
   
   
   
  110. </body> 
    111. 
   
   
   
   
  111. </html> 
    112.
PC側かモバイル側かを判断するJS