zoukankan      html  css  js  c++  java
  • 加了 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>
  • 相关阅读:
    C#图片存到资源文件,以及调用图片
    error C2039: “create”: 不是“cocos2d::GLView”的成员,出错解决办法
    error LNK2038: 检测到“_MSC_VER”的不匹配项: 值“1600”不匹配值“1800”
    vs2013激活码
    AppDelegate.h文件
    AppDelegate.cpp文件详解
    【最终版】Cocos2d-x&JS v3.7 发布!
    cocos2d-x 3.0 示例代码分析3:BaseTest
    vue li click
    me
  • 原文地址:https://www.cnblogs.com/qzsonline/p/3103906.html
Copyright © 2011-2022 走看看