js實(shí)現(xiàn)隨屏幕滾動(dòng)的帶緩沖效果的右下角廣告代碼
本文實(shí)例講述了js實(shí)現(xiàn)隨屏幕滾動(dòng)的帶緩沖效果的右下角廣告代碼。分享給大家供大家參考。具體如下:
一個(gè)隨屏幕自動(dòng)滾動(dòng)的右下角廣告代碼,這里請(qǐng)注意幾個(gè)參數(shù):
id 你要滾動(dòng)的內(nèi)容的id
r 放在左邊還是右邊 默認(rèn)是右邊
t 你要放在頁(yè)面的那個(gè)位置默認(rèn)是貼著底邊 0是貼著頂邊
f 1表示固定 不寫(xiě)或者0表示滾動(dòng)(ie6固定無(wú)效)
是不是很實(shí)用呢,這個(gè)版本經(jīng)過(guò)作者二次修正,兼容性還不錯(cuò)。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-right-buttom-float-follow-scroll-adv-codes/
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>隨屏幕滾動(dòng)的帶緩沖效果的右下角廣告</title> <style> html,body{ height:2000px; } </style> </head> <body> <div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >拖動(dòng)滾動(dòng)條試試哦~</div> </body> </html> <script> function scroll(p){ var d = document,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAgent); if(o){ o.style.cssText +=";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.r?'left':"right")+":0;"+(p.t!=undefined?'top:'+p.t+'px':'bottom:0'); if(!p.f||ie6){ -function(){ var t = 500,st = d.documentElement.scrollTop||d.body.scrollTop,c; c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight);//如果你是html 4.01請(qǐng)改成d.body,這里不處理以減少代碼 c!=0&&(o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px',t=10); setTimeout(arguments.callee,t) }() } } } scroll({ id:'aa' }) </script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)div彈出層的方法
- 使用js實(shí)現(xiàn)關(guān)閉js彈出層的窗口
- js 點(diǎn)擊頁(yè)面其他地方關(guān)閉彈出層(示例代碼)
- js點(diǎn)擊任意區(qū)域彈出層消失實(shí)現(xiàn)代碼
- 使用JavaScript實(shí)現(xiàn)彈出層效果的簡(jiǎn)單實(shí)例
- JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出一個(gè)DIV框完整實(shí)例(帶緩沖動(dòng)畫(huà)漸變效果)
- js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
- JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼
- JS下拉緩沖菜單示例代碼
- JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果
相關(guān)文章
fireworks菜單生成器mm_menu.js在 IE 7.0 顯示問(wèn)題的解決方法
由于公司官網(wǎng)采用的是dreamwaver / fireworks 內(nèi)建的彈出式菜單的JS,在IE7下發(fā)現(xiàn)菜單項(xiàng)文字顯示都變成一排,無(wú)法正確瀏覽.2009-10-10js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼,對(duì)于firefox不兼容。2009-12-12JS關(guān)閉子窗口并且刷新上一個(gè)窗口的實(shí)現(xiàn)示例
這篇文章主要介紹了JS關(guān)閉子窗口并且刷新上一個(gè)窗口的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03JavaScript實(shí)現(xiàn)圖片偽異步上傳過(guò)程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片偽異步上傳過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04微信小程序如何實(shí)現(xiàn)數(shù)據(jù)共享與方法共享詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)數(shù)據(jù)共享與方法共享的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01kindeditor修復(fù)會(huì)替換script內(nèi)容的問(wèn)題
這里給大家分享的是個(gè)人修改的kindeditor的代碼,主要是修復(fù)了一些BUG,添加了些常用功能,推薦給大家,有需要的小伙伴可以參考下。2015-04-04JS控制鼠標(biāo)拒絕點(diǎn)擊某一按鈕的實(shí)例
下面小編就為大家分享一篇JS控制鼠標(biāo)拒絕點(diǎn)擊某一按鈕的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12