div浮动层移动代码.doc
div浮动层移动代码.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- div 浮动 移动 代码
- 资源描述：
-
CSS实现浮动层跟随滚动条特效(兼容IE6) 众所周知,很多网站要做个浮动层(可以放置广告)，并且能跟随滚动条移动，这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器： １．onScroll脚本实现 首先，用DW辅助可生成一个浮动层Div的样式: #menu{ position:fixed;/*低版本浏览器不支持*/ _position:absolute;/*利用hack方式处理IE6*/ left:100px;border:1px black solid;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); g_myBodyInstance.onscroll = page_scroll; /* 注: # 页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。 # 页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。 */ 整段代码演示: 1 <html xmlns="http://www.w3.org/1999/xhtml" > 2 <head> 3 <style> 4 #menu 5 { 6 position:fixed;_position:absolute;left:100px;border:1px black solid;width:200px;height:115px;z-index:1; 7 } 8 </style> 9 </head> 10 11 <body> 12 <div id="menu"> 13 Hello world!!! 14 </div> 15 <script> 16 document.write("<ul style='list-style-type:decimal'>"); 17 for(var i=0;i<300;i++) 18 { 19 document.write("<li></li>"); 20 } 21 document.write("</ul>"); 22 23 function page_scroll() 24 { 25 document.getElementById('menu').style.top = parseInt(g_myBodyInstance.scrollTop) + "px"; 26 } 27 g_myBodyInstance = (document.body ? document.body : window); 28 g_myBodyInstance.onscroll = page_scroll; 29 </script> 30 </body> 31 </html> 分析:这种实现通过编程的方式来处理IE6下跟随滚动条移动的问题:它利用了hack写法_position:absolute;在onscroll事件中设置目标的位置;而在IE6以上版本或者其它firefox,Chrome,Safari,Opera浏览器下,编程方式却变为无效,通过CSS样式position:fixed;就能实现浮动且能跟随滚动条移动.这种方式简单,不需要控制太多的样式,只不过在IE6滚动时不够平滑. 2. 全CSS实现 这种方式使用几个特殊的CSS来解决IE6下跟随滚动条移动的问题: 1) position:absolute;让IE6相信absolute就是fixed. 2)body { margin:0; /* 必须 */ height:100%; /* 必须 */ overflow-y:auto;/* 必须 */ } 整段代码演示: <!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" > <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> <!--[if IE 6]> 16 <style type="text/css"> 17 /*<![CDATA[*/ 18 html {overflow-x:auto; overflow-y:hidden;} /*用来隐藏html的滚动条*/ 19 /*]]>*/ 20 </style> <![endif]--> </head> <body> <div> <script> document.write("<ul style='list-style-type:decimal'>"); for(var i=0;i<300;i++) { document.write("<li></li>"); } document.write("</ul>"); </script> </div> <div id="menu"> <img src=" /> </div> </body> </html> 分析: position:absolute;在IE6下只能起到固定元素位置的用处,但是在height:100%;overflow-y:auto;的共同作用下,它竟然使元素也能浮动起来了!并且在IE6浏览器下的跟随滚动条移动也是平滑的! 这种方式很强大,但是有可能会影响整个网页的布局,使用这种方式的时候要小心. 转自： div随滚动条移动 <!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> </head> <body> <div style="width:100px;height:100px;position:absolute;right:20px;top:80px;background:#FFCC00;border:1px solid #999;"></div> <script type="text/javascript"> <!-- var i=0, str="";while(i++<100){str+="<br>"} document.write(str); var div = document.getElementsByTagName("div")[0]; var y = parseInt(div.style.top); setInterval(function(){ var cy = parseInt(div.style.top); var dy = document.body.scrollTop || document.documentElement.scrollTop; div.style.top = (cy + (dy -(cy-y))*0.1) + "px"; },10); //--> </script> </body> </html>展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/8954158.html