JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

时间：2021-05-26

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码。分享给大家供大家参考，具体如下：

这里演示了始终随屏滚动的JavaScript代码，在国内的应用泛滥成灾了，特别是一些喜欢漂浮广告的站长，常把本代码用作了漂浮广告，其实这种效果的初衷是编写一个随屏滚动的菜单，让游客随时随地可以控制网站的导向。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/

具体代码如下：

<html><head><title>随屏滚动</title><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><body><div class="box" id="box1" style="top:0;left:0;">AD1</div><div class="box" id="box2" style="top:0;right:0;">AD2</div></body><script type="text/javascript"> var id=function(o){return document.getElementById(o)}var scroll=function (o){ var space=id(o).offsetTop; id(o).style.top=space+'px'; void function(){ var goTo = 0; 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);} },50); }()}scroll('box1');scroll('box2');</script></html>

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章