浮动广告CSS 版

浮动广告是时下网上较为流行的广告形式之一。当你拖动浏览器的滚动条时，这种在页面上浮动的广告，可以跟随屏幕一起移动。

制作浮动广告,看起来不是一个很困难的任务.但它却花了我近6个小时的时间。

刚接到这个需求时，我就想起我已前的Javascript代码

function page_scroll()
{
oDiv.style.top = parseInt(document.body.scrollTop) + 10;
}

window.document.body.onscroll = page_scroll;

奇怪的事情就是window.document.body.onscroll在我的IE浏览器里根本就不触发。

原来在Visual Studio 2005中默认的DOCTYPE声明是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

而不是Visual Studio 2003中的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

如果使用2005中默认的DOCTYPE声明根本就不触发onscroll事件。看起来我只有一个选择，使用2003的DOCTYPE声明。
但是我的css样式表全部是基于2005的DOCTYPE声明，如果切换到2003的DOCTYPE声明工作量将不是一般的大。

只有google一下，看一看有没有人和我一样的遭遇
果然没有失望在http://www.zeali.net/blog/entry.php?id=62中提出了两个解决方案

1 使用setInterval或者setTimeout来不停的改变这个浮动层的位置
2 CSS属性值position的fixed属性让该层能够始终位于窗口的指定位置

第一个方案马上被否决，回为这太占资源。
第二个方案看起来挺美，可惜ＩＥ并不支持。不过在FireFox中的效果的确不错。正如文章在所说"从显示效果来看，在Firefox上的显示效果比IE中通过onscroll触发层的位置移动处理显示效果要好很多，看不到层的闪动。"

二个方案都不能用。只能继续寻找。终于找到完美解决的方案

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
body {
    margin:0;  /* 必须 */
    border:0;
    height:100%; /* 必须 */
    overflow-y:auto;/* 必须 */
    }
#menu {display:block; top:10px; left:150px; width:130px; position:fixed;}  /* IE并不认识fixed，而FF认识 */
* html #menu {position:absolute;} /* 这个只有IE认识 */

</style>

</head>

<body>
<div>
<ul style="list-style-type:decimal">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<ul>
</div>
<div id="menu">
<img src="http://www.cnblogs.com/images/cnblogs_com/goodspeed/795/o_o_mylogo.gif" />
</div>
</body>
</html>

据说IE7已提供了fixed的支持。

使用上面的代码你必须注意
body里的元素不能有position:relative ，否则这个元素将不会滚动。

Goodspeed

导航

公告

浮动广告CSS 版