左下角广告代码始终漂浮并跟随滚动条

发布时间：2018-09-01 02:26:46 所属栏目：Linux 来源：站长网

导读：现在非常流行的一种网页广告形式，就是在右下角或左下角跟随滚动条的漂浮广告，本文介绍的就是始终漂浮在网页左下角的浮动菜单，不管你怎么拖动滚动条，这都始终保持在那里，加入了 Java Script 运动缓冲的功能，当拖动滚动条的时候，它会慢慢的滚动出来

　　现在非常流行的一种网页广告形式，就是在右下角或左下角跟随滚动条的漂浮广告，本文介绍的就是始终漂浮在网页左下角的浮动菜单，不管你怎么拖动滚动条，这都始终保持在那里，加入了JavaScript运动缓冲的功能，当拖动滚动条的时候，它会慢慢的滚动出来。

<html> <head> <title>始终漂浮在左下角的菜单 - Liehuo.Net</title> <meta charset="gbk" /> <style type="text/css"> *{padding:0;margin:0;} html{height:100%;} body{height:200%;} .box{position:absolute;width:100px;height:100px;background:#ccc} </style> </head> <p style="height:1600px;"> </p> <body> <div class="box" id="box1" style="bottom:0;left:0;">这里放置菜单</div> </body> <script type="text/javascript"> var $id=function(id){ return (document.getElementById(id)) || id; } var locked=false; var scroll=function (o){ var space=$id(o).offsetTop; $id(o).style.top=space+'px'; var fixed = function(){ if(locked) return; locked=true; var roll=setInterval(function(){ var height =document.documentElement.scrollTop+document.body.scrollTop+space; var top = parseInt($id(o).style.top); if(height!= top){ goTo = height-parseInt((height - top)*0.9); $id(o).style.top=goTo+'px'; } else{ if(roll) clearInterval(roll); locked=false; } },50); } return fixed; } window.onscroll=scroll('box1'); </script> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Linux如何查看内存磁	linux是怎样增加路由
linux怎样查看有哪些组	1 万Star！源于Androi

左下角广告代码 始终漂浮并跟随滚动条

左下角广告代码始终漂浮并跟随滚动条