固定定位实现滚动广告效果

最新推荐文章于 2023-04-08 16:47:30 发布

原创最新推荐文章于 2023-04-08 16:47:30 发布 · 767 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #function #scroll #xhtml #div #ie

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了两种实现滚动广告框的方法：一种使用JavaScript动态调整位置，涉及scrollHeight等属性；另一种利用CSS固定定位简化代码，解决了IE6浏览器兼容性问题。

以前在论坛回帖的时候，写过一个滚动广告框的效果，代码如下：

<html> <head> <title> Scroll Box </title> <mce:script type="text/javascript"></mce:script> </head> <body> <mce:script type="text/javascript"></mce:script> </body> </html>

用到了scrollHeight,scrollTop,clientHeight等，比较麻烦

今天在蓝色理想看到了别人用固定定位的方法来实现，代码非常简单，不过原理却不懂，先记录下来：

方法一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <mce:style></mce:style><style mce_bogus="1">*{margin:0} body{ height:1000px; width:1000px; } #a{ width:300px; height:100px; background:red; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <mce:script type="text/javascript"></mce:script> <div id ="d" style="display:none;" mce_style="display:none;"></div> <div id='a'>test</div> </body> </html>

方法二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* { margin:0; padding:0;} #content{ height:2000px; } #a{ position:fixed; bottom:0; right:0; width:200px; height:60px; background:#F00;} /*IE6 fixed bug*/ * html{overflow:hidden;} * html body{height:100%;overflow:auto;} * html #a{position:absolute;right:18px;}</style> </head> <body> <div id="content"> IE6 position:fixed </div> <div id="a">IE6 position:fixed</div> </body> </html>