加了 DOCTYPE 以后js飘动效果失效解决办法 -

songjg2010

浏览: 214501 次
性别:
来自: 北京

最近访客更多访客>>

gypb

likejiushilike

frantic

wain163

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

加了 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>