700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > php 漂浮广告代码 JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

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

时间:2021-08-27 08:37:06

相关推荐

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

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

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

运行效果截图如下:

在线演示地址如下:

具体代码如下:

随屏滚动

*{padding:0;margin:0;}

html{height:100%;}

body{height:200%;}

.box{position:absolute;width:100px;height:100px;background:#ccc}

AD1AD2

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');

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。