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

2019-11-20 11:20:00

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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程序设计有所帮助。

上一篇：javascript如何实现暂停功能

下一篇：jQuery实现可关闭固定于底（顶）部的工具条菜单效果