js網(wǎng)頁側(cè)邊隨頁面滾動廣告效果實(shí)現(xiàn)
更新時間：2011年04月14日 22:07:32 作者：
其實(shí)這個效果不是什么難實(shí)現(xiàn)的效果，關(guān)鍵注意幾個地方就可以了
a.scrollTop的計(jì)算；
b.滾動元素的定位值計(jì)算；
c.滾動周期設(shè)定；
代碼如下：
css部分：
/*測試用的高度*/
body{ height:3000px;}
div,ul,li,body{margin:0; padding:0;}
/*position:absolute;用于元素的定位*/
#roll{width:50px; height:100px; background:#99CC00; position:absolute;}
Html代碼：
<body>
<div id="roll"></div>
</body>
JS代碼：
var roll=document.getElementById('roll'),
initX=0,
initY,
compY,
sp=15,
//可調(diào)整時間間隔，步進(jìn)值不宜過大，不然IE下有點(diǎn)閃屏；
timeGap=5,
doc=document.documentElement,
docBody=document.body;
compY=initY=200;
roll.style.right=initX+"px";
;(function(){
var curScrollTop=(doc.scrollTop||docBody.scrollTop||0)-(doc.clientTop||docBody.clientTop||0);
//每次comP的值都不一樣；直到roll.style.top===doc.scrollTop+initY；
compY+=(curScrollTop+initY-compY)/sp;
roll.style.top=Math.ceil(compY)+"px";
setTimeout(arguments.callee,timeGap);
})();
b.滾動元素的定位值計(jì)算；
c.滾動周期設(shè)定；
代碼如下：
css部分：
復(fù)制代碼 代碼如下:
/*測試用的高度*/
body{ height:3000px;}
div,ul,li,body{margin:0; padding:0;}
/*position:absolute;用于元素的定位*/
#roll{width:50px; height:100px; background:#99CC00; position:absolute;}
Html代碼：
復(fù)制代碼 代碼如下:
<body>
<div id="roll"></div>
</body>
JS代碼：
復(fù)制代碼 代碼如下:
var roll=document.getElementById('roll'),
initX=0,
initY,
compY,
sp=15,
//可調(diào)整時間間隔，步進(jìn)值不宜過大，不然IE下有點(diǎn)閃屏；
timeGap=5,
doc=document.documentElement,
docBody=document.body;
compY=initY=200;
roll.style.right=initX+"px";
;(function(){
var curScrollTop=(doc.scrollTop||docBody.scrollTop||0)-(doc.clientTop||docBody.clientTop||0);
//每次comP的值都不一樣；直到roll.style.top===doc.scrollTop+initY；
compY+=(curScrollTop+initY-compY)/sp;
roll.style.top=Math.ceil(compY)+"px";
setTimeout(arguments.callee,timeGap);
})();
您可能感興趣的文章:
- js阻止移動端頁面滾動的兩種方法
- 解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法
- 基于AngularJS實(shí)現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動切換頁面效果(類似360默認(rèn)頁面滾動切換效果)
- js頁面滾動時層智能浮動定位實(shí)現(xiàn)(jQuery/MooTools)
- Javascript實(shí)現(xiàn)頁面滾動時導(dǎo)航智能定位
- JavaScript實(shí)現(xiàn)頁面滾動圖片加載(仿lazyload效果)
- 原生Js頁面滾動延遲加載圖片實(shí)現(xiàn)原理及過程
- JS實(shí)現(xiàn)隨頁面滾動顯示/隱藏窗口固定位置元素
- 原生js實(shí)現(xiàn)頁面滾動動畫
相關(guān)文章
js調(diào)用activeX獲取u盤序列號的代碼，需要的朋友可以參考下。2011-11-11
本文主要介紹了Mac下使用charles遇到的問題以及解決辦法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
window.location不跳轉(zhuǎn)的問題解決方法
window.location的跳轉(zhuǎn)失效的情況有沒有遇到過啊，這主要是冒泡傳遞影響了，下面有個不錯的解決方法，大家可以參考下2014-04-04
JavaScript顯示表單內(nèi)元素?cái)?shù)量的方法
這篇文章主要介紹了JavaScript顯示表單內(nèi)元素?cái)?shù)量的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了js注入，黑客之路必備！本文告訴大家什么是js注入，如何進(jìn)行js注入攻防，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript JSON數(shù)據(jù)處理全集(小結(jié))
這篇文章主要介紹了JavaScript JSON數(shù)據(jù)處理全集，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了JS保留兩位小數(shù) 四舍五入函數(shù)的小例子，有需要的朋友可以參考一下2013-11-11
?JavaScript?數(shù)據(jù)結(jié)構(gòu)之散列表的創(chuàng)建(1)
這篇文章主要介紹了?JavaScript?數(shù)據(jù)結(jié)構(gòu)之散列表的創(chuàng)建，文章圍繞主題相關(guān)內(nèi)容展開詳細(xì)的介紹，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了微信小程序 wxParse插件顯示視頻問題，文中給大家提到了微信小程序插件wxParse的使用,需要的朋友可以參考下2019-09-09
JavaScript實(shí)現(xiàn)動態(tài)留言板
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動態(tài)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03