加了 DOCTYPE 以后js飘动效果失效解决办法
首先是网上的一段代码，注意下面的代码是没有DOCTYPE申明的，不过运行正常，但是加了DOCTYPE以后，代码失效。
1 <html> 2 <head> 3 <title>漂浮广告</title> 4 <body> 5 <div id="codefans_net" style="position:absolute"> 6 <!--链接地址--><a href="#" target="_blank"> 7 <!--图片地址--><img src="/images/logo.gif" border="0"> 8 </a> 9 </div> 10 <script> 11 var x = 50,y = 60 12 var xin = true, yin = true 13 var step = 1 14 var delay = 10 15 var obj=document.getElementById("codefans_net") 16 function float() { 17 var L=T=0 18 var R= document.body.clientWidth-obj.offsetWidth 19 var B = document.body.clientHeight-obj.offsetHeight 20 obj.style.left = x + document.body.scrollLeft 21 obj.style.top = y + document.body.scrollTop 22 x = x + step*(xin?1:-1) 23 if (x < L) { xin = true; x = L} 24 if (x > R){ xin = false; x = R} 25 y = y + step*(yin?1:-1) 26 if (y < T) { yin = true; y = T } 27 if (y > B) { yin = false; y = B } 28 } 29 var itl= setInterval("float()", delay) 30 obj.onmouseover=function(){clearInterval(itl)} 31 obj.onmouseout=function(){itl=setInterval("float()", delay)} 32 </script> 33 </body> 34 </html>
这是因为DOCTYPE是不能使用document.body的，一定要改成document.documentElement，还有就是不要忘记了"px"，这很重要，浏览器都是以像素运算的。
以下是改过的代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>123</title> 6 </head> 7 <body> 8 <!-- 漂浮图片开始 --> 9 <style type="text/css"> 10 #ad_Float a { 11 float: left; 12 } 13 </style> 14 <div id="ad_Float" style="position:absolute"> 15 <a target="_blank" href="http://zjdj.zjol.com.cn"> 16 <img src="http://zw.zcom.gov.cn/img/szdwjzx_01.gif" alt="浙江组织工作网" width=115 height=80 /> 17 </a> 18 <a target="_blank" href="http://www.zjks.com/"> 19 <img src="http://zw.zcom.gov.cn/img/szdwjzx_02.gif" alt="浙江人事考试网" width=115 height=80 /> 20 </a> 21 </div> 22 <script type="text/javascript"> 23 var x = 50, y = 60; 24 var xin = true, yin = true; 25 var step = 1; 26 var delay = 20; 27 var obj = document.getElementById("ad_Float"); 28 function ad_Float() { 29 var T; 30 var L = T = 0; 31 var R = document.documentElement.clientWidth - obj.offsetWidth; 32 var B = document.documentElement.clientHeight - obj.offsetHeight; 33 obj.style.left = x + document.documentElement.scrollLeft + "px"; 34 obj.style.top = y + document.documentElement.scrollTop + "px"; 35 x = x + step * (xin ? 1 : -1); 36 if (x < L) { 37 xin = true; 38 x = L; 39 } 40 if (x > R) { 41 xin = false; 42 x = R; 43 } 44 y = y + step * (yin ? 1 : -1); 45 if (y < T) { 46 yin = true; 47 y = T; 48 } 49 if (y > B) { 50 yin = false; 51 y = B; 52 } 53 } 54 var itl = setInterval("ad_Float()", delay); 55 obj.onmouseover = function () { 56 clearInterval(itl); 57 }; 58 obj.onmouseout = function () { 59 itl = setInterval("ad_Float()", delay); 60 }; 61 </script> 62 <!-- 漂浮图片结束 --> 63 </body> 64 </html>
