浮动广告CSS 版

最新推荐文章于 2021-12-23 16:54:41 发布

weixin_33690367

最新推荐文章于 2021-12-23 16:54:41 发布

阅读量146

点赞数

文章标签： xhtml javascript php ViewUI

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

制作浮动广告,看起来不是一个很困难的任务.但它却花了我近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 ="https://images.cnblogs.com/cnblogs_com/goodspeed/795/o_o_mylogo.gif" />
</ div >
</ body >
</ html >

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

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