JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動(dòng)漂浮廣告代碼
更新時(shí)間：2015年11月06日 10:53:13 作者：企鵝
這篇文章主要介紹了JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動(dòng)漂浮廣告代碼,通過JavaScript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)響應(yīng)頁(yè)面元素滾動(dòng)事件實(shí)現(xiàn)懸浮廣告的緩沖漂浮效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動(dòng)漂浮廣告代碼。分享給大家供大家參考，具體如下：
這里演示了始終隨屏滾動(dòng)的JavaScript代碼，在國(guó)內(nèi)的應(yīng)用泛濫成災(zāi)了，特別是一些喜歡漂浮廣告的站長(zhǎng)，常把本代碼用作了漂浮廣告，其實(shí)這種效果的初衷是編寫一個(gè)隨屏滾動(dòng)的菜單，讓游客隨時(shí)隨地可以控制網(wǎng)站的導(dǎo)向。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/
具體代碼如下：
<html>
<head>
<title>隨屏滾動(dòng)</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>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
操作符~， 是按位取反的意思，表面上~~（取反再取反）沒有意義，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-04-04
JS實(shí)現(xiàn)時(shí)間格式化的方式匯總
這篇文章介紹了JS實(shí)現(xiàn)時(shí)間格式化的方式，有需要的朋友可以參考一下2013-10-10
uni-app微信小程序登錄授權(quán)的實(shí)現(xiàn)
這篇文章主要介紹了uni-app微信小程序登錄授權(quán)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
去除JavaScript對(duì)象中空值和空對(duì)象的四種方式
開發(fā)時(shí)遇到一個(gè)問題,需要將對(duì)象中的空值和空對(duì)象去除,所以這篇文章主要給大家介紹了關(guān)于去除JavaScript對(duì)象中空值和空對(duì)象的四種方式,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簽到功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
這篇文章主要介紹了原生javascript實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定功能,結(jié)合實(shí)例形式分析了JavaScript基于觀察者模式實(shí)現(xiàn)類似vue的數(shù)據(jù)綁定相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
JS apply用法總結(jié)和使用場(chǎng)景實(shí)例分析
這篇文章主要介紹了JS apply用法總結(jié)和使用場(chǎng)景,結(jié)合實(shí)例形式分析了JS apply的基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
首先來(lái)做一個(gè)實(shí)例，批量上傳的UI控件。以后一般做的示例也是以UI控件為主的。都是封裝成Object或者用Function封裝成"Class"類。2008-07-07
詳解如何在Canvas上實(shí)現(xiàn)坐標(biāo)定位
這篇文章我們將來(lái)詳細(xì)的給大家講解一下如何在 canvas 上實(shí)現(xiàn)坐標(biāo)的定位,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
JavaScript獲取數(shù)據(jù)類型的方法詳解
這篇文章給大家介紹了JavaScript獲取數(shù)據(jù)類型的方法,文中所介紹的所有知識(shí)點(diǎn)、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下2024-02-02