div浮动层移动代码

div浮动层移动代码

ID:15163945

大小:41.00 KB

页数:4页

时间:2018-08-01

div浮动层移动代码_第1页
div浮动层移动代码_第2页
div浮动层移动代码_第3页
div浮动层移动代码_第4页
资源描述:

《div浮动层移动代码》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、CSS实现浮动层跟随滚动条特效(兼容IE6)众所周知,很多网站要做个浮动层(可以放置广告),并且能跟随滚动条移动,这样才能使用户在任何位置都能看到它(广告),实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器:1.onScroll脚本实现首先,用DW辅助可生成一个浮动层Div的样式:#menu{position:fixed;/*低版本浏览器不支持*/_position:absolute;/*利用hack方式处理IE6*/left:100px;border:1pxblacks

2、olid;width:200px;height:115px;z-index:1;} 然后实现跟随滚动条移动,为onScroll事件绑定一个方法.function page_scroll(){document.getElementById('menu').style.top=parseInt(g_myBodyInstance.scrollTop)+10+"px";}g_myBodyInstance=(document.documentElement?document.documentElement:window

3、);g_myBodyInstance.onscroll=page_scroll;/*注:#页面具有DTD(或者说指定了DOCTYPE)时,使用document.documentElement。#页面不具有DTD(或者说没有指定了DOCTYPE)时,使用document.body。*/整段代码演示:1 2  3 9 10 11 12 13 Helloworld!!!14 

15 30 31 分析:这种实现通过编程的方式来处理IE6下跟随滚动条移动的问题:它利用了hack写法_position:absolute;在onscroll事件中设置目标的位置;而在IE6以上版本或者其它firefox,Chrome,Safari,Opera浏览器下,编程方式却变为无效,通过CSS样式position:fixed;就能实现浮动且能跟随滚动条移动.这种方式简单,不需要控制太多的样式,只不过在IE6滚动时不

7、够平滑.2.全CSS实现这种方式使用几个特殊的CSS来解决IE6下跟随滚动条移动的问题:1) position:absolute;让IE6相信absolute就是fixed.2)body {    margin:0;  /* 必须 */    height:100%; /* 必须 */    overflow-y:auto;/* 必须 */    }整段代码演示:

8、DTD/xhtml11.dtd">body{margin:0;/*必须*/border:0;height:100%;/*必须*/overflow-y:auto;/*必须*/}#menu{display:block;top:10px;left:150px;widt

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签