返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
JavaScript教程当前位置:首页 > HTML教程 > JavaScript教程 > 正文

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

发布时间:2017-07-07 09:36:02   来源:   点击:
网上的一段代码,注意下面的代码是没有DOCTYPE申明的,不过运行正常,但是加了DOCTYPE以后,代码失效
  1. var xPos = 300; 
  2. var yPos = 200;  
  3. var step = 1; 
  4. var delay = 30;  
  5. var height = 0; 
  6. var Hoffset = 0; 
  7. var Woffset = 0; 
  8. var yon = 0; 
  9. var xon = 0; 
  10. var pause = true
  11. var interval; 
  12. var img1 = document.getElementById("img1"); 
  13. img1.style.top = yPos; 
  14. function changePos()  
  15.     width = document.body.clientWidth; 
  16.     height = document.body.clientHeight; 
  17.     Hoffset = img1.offsetHeight; 
  18.     Woffset = img1.offsetWidth; 
  19.     img1.style.left = xPos + document.body.scrollLeft; 
  20.     img1.style.top = yPos + document.body.scrollTop; 
  21.     if (yon)  
  22.         {yPos = yPos + step;} 
  23.     else  
  24.         {yPos = yPos - step;} 
  25.     if (yPos < 0)  
  26.         {yon = 1;yPos = 0;} 
  27.     if (yPos >= (height - Hoffset))  
  28.         {yon = 0;yPos = (height - Hoffset);} 
  29.     if (xon)  
  30.         {xPos = xPos + step;} 
  31.     else  
  32.         {xPos = xPos - step;} 
  33.     if (xPos < 0)  
  34.         {xon = 1;xPos = 0;} 
  35.     if (xPos >= (width - Woffset))  
  36.         {xon = 0;xPos = (width - Woffset);   } 
  37.     } 
  38.      
  39.     function start() 
  40.      { 
  41.         img1.visibility = "visible"
  42.         interval = setInterval('changePos()', delay); 
  43.     } 
  44.     function pause_resume()  
  45.     { 
  46.         if(pause)  
  47.         { 
  48.             clearInterval(interval); 
  49.             pause = false;} 
  50.         else  
  51.         { 
  52.             interval = setInterval('changePos()',delay); 
  53.             pause = true;  
  54.             } 
  55.         } 
  56.     start(); 
这是因为DOCTYPE是不能使用document.body的,一定要改成document.documentElement,还有就是不要忘记了"px",这很重要,浏览器都是以像素运算的。

  1. var xPos = 300; 
  2. var yPos = 200;  
  3. var step = 1; 
  4. var delay = 30;  
  5. var height = 0; 
  6. var Hoffset = 0; 
  7. var Woffset = 0; 
  8. var yon = 0; 
  9. var xon = 0; 
  10. var pause = true
  11. var interval; 
  12. var img1 = document.getElementById("img1"); 
  13. img1.style.top = yPos; 
  14. function changePos()  
  15.     width = document.documentElement.clientWidth; 
  16.     height = document.documentElement.clientHeight; 
  17.     Hoffset = img1.offsetHeight; 
  18.     Woffset = img1.offsetWidth; 
  19.     img1.style.left = xPos + document.documentElement.scrollLeft + "px"; 
  20.     img1.style.top = yPos + document.documentElement.scrollTop + "px"; 
  21.     if (yon)  
  22.         {yPos = yPos + step;} 
  23.     else  
  24.         {yPos = yPos - step;} 
  25.     if (yPos < 0)  
  26.         {yon = 1;yPos = 0;} 
  27.     if (yPos >= (height - Hoffset))  
  28.         {yon = 0;yPos = (height - Hoffset);} 
  29.     if (xon)  
  30.         {xPos = xPos + step;} 
  31.     else  
  32.         {xPos = xPos - step;} 
  33.     if (xPos < 0)  
  34.         {xon = 1;xPos = 0;} 
  35.     if (xPos >= (width - Woffset))  
  36.         {xon = 0;xPos = (width - Woffset);   } 
  37.     } 
  38.      
  39.     function start() 
  40.      { 
  41.         img1.visibility = "visible"
  42.         interval = setInterval('changePos()', delay); 
  43.     } 
  44.     function pause_resume()  
  45.     { 
  46.         if(pause)  
  47.         { 
  48.             clearInterval(interval); 
  49.             pause = false;} 
  50.         else  
  51.         { 
  52.             interval = setInterval('changePos()',delay); 
  53.             pause = true;  
  54.             } 
  55.         } 
  56.     start(); 

或者你也可以直接把

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

改成:

  1. <!DOCTYPE> 
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814