加了 DOCTYPE 以后js飘动效果失效解决办法
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=018 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>?