JavaScript悬浮广告制作注意事项

最新推荐文章于 2021-07-11 17:24:06 发布

原创最新推荐文章于 2021-07-11 17:24:06 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #悬浮广告

本文详细介绍了在网页中实现浮动广告的JavaScript技巧，包括在不同浏览器下获取滚动位置的兼容性解决方案，以及如何使广告随页面滚动保持固定位置。同时，文章还提到了指定文档类型对JS获取style值的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#div1{ top:10px;}

</style>
</head>

<body>
 <div id="div1" style="position:absolute; background-color:#0FF; width:200px; top:0px; height:400px;">

</div>
<script type="text/javascript">
 function move()
 {
 if(parseInt(document.documentElement.scrollTop)=='')//兼容性
 var RealTop=parseInt(document.body.scrollTop); //除了ie 和 firefox 浏览器其他的使用这个
 else
 var RealTop=parseInt(document.documentElement.scrollTop);//ieie 和 firefox


 var left=0;

 left+=RealTop;
 div1.style.top=left+'px';


 }
 setInterval("move()",1);//每0.1秒执行move函数
 </script>
sdkjj 
sdkjj 
sdkjj sdkjj vsdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj 
sdkjj 
sdkjj 
sdkjj sdkjj vsdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj 
sdkjj sdkjj vsdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj 
sdkjj 
sdkjj 
sdkjj sdkjj vsdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj sdkjj 
</body>
</html>

1.（在ie和firefox中） html不指定文档类型获取scroll函数时可以使用document.body.scrollTop，但指定后必须使用document.documentElement.scrollTop。（在其他浏览器中）可以随意使用document.body.scrollTop，但使用document.documentElement.scrollTop无效

2.不写<!doctype html> ，也就是指定文档类型或者在style标签中在属性值前把：写成=，会导致js获取style值时全部是空值

这只是我写悬浮广告时，遇到的一些困难而已，不足之处，多多指教.