JavaScript實現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼

更新時間：2015年11月06日 10:53:13 作者：企鵝

這篇文章主要介紹了JavaScript實現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼,通過JavaScript結(jié)合時間函數(shù)動態(tài)響應(yīng)頁面元素滾動事件實現(xiàn)懸浮廣告的緩沖漂浮效果,非常簡單實用,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)帶緩沖效果的隨屏滾動漂浮廣告代碼。分享給大家供大家參考，具體如下：

這里演示了始終隨屏滾動的JavaScript代碼，在國內(nèi)的應(yīng)用泛濫成災(zāi)了，特別是一些喜歡漂浮廣告的站長，常把本代碼用作了漂浮廣告，其實這種效果的初衷是編寫一個隨屏滾動的菜單，讓游客隨時隨地可以控制網(wǎng)站的導(dǎo)向。

運行效果截圖如下：

在線演示地址如下：

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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

js實現(xiàn)輪播圖效果純js實現(xiàn)圖片自動切換
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖效果，圖片自動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
Javascript的并行運算實現(xiàn)代碼
隨著多核cpu的普級,并發(fā)/并行多線程運算在主流的編程語言越來越流行,而在目前Javascript實現(xiàn)中還看不到在語言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會在語言的層面有很大的變化.
2010-11-11
webpack+vue-cil中proxyTable處理跨域的方法
這篇文章主要介紹了webpack+vue-cil中proxyTable處理跨域的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
如何使用JS console.log()技巧提高工作效率
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-10-10
javascript eval()應(yīng)用實例 select
javascript eval應(yīng)用小例子。實例代碼就是控制checkbox的選擇與取消的函數(shù)，非常不錯。
2009-07-07
JavaScript常見的函數(shù)中的屬性與方法總結(jié)
當(dāng)定義和調(diào)用函數(shù)時，JavaScript?函數(shù)對象會自動具有一些特定的屬性，本文為大家總結(jié)了一些常見的屬性和方法，感興趣的小伙伴可以了解一下
2023-05-05
Babel 入門教程學(xué)習(xí)筆記
Babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，本篇文章主要介紹了Babel 入門教程學(xué)習(xí)筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
淺談JavaScript for循環(huán) 閉包
下面小編就為大家?guī)硪黄獪\談JavaScript for循環(huán) 閉包。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
詳解JavaScript中new操作符的解析和實現(xiàn)
這篇文章主要介紹了JavaScript中new操作符的解析和實現(xiàn)，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下
2020-09-09
JavaScript實現(xiàn)自動對頁面上敏感詞進行屏蔽的方法
這篇文章主要介紹了JavaScript實現(xiàn)自動對頁面上敏感詞進行屏蔽的方法,涉及javascript針對頁面字符串查找及替換的相關(guān)技巧,需要的朋友可以參考下
2015-07-07