本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
