js實現(xiàn)簡單的左右兩邊固定廣告效果實例

更新時間：2015年04月10日 10:55:11 作者：jingangel

這篇文章主要介紹了js實現(xiàn)簡單的左右兩邊固定廣告效果,實例分析了javascript實現(xiàn)固定廣告的技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)簡單的左右兩邊固定廣告效果的方法。分享給大家供大家參考。具體分析如下：

大多數(shù)網(wǎng)站都有左右兩邊的固定廣告位，下面呢就是實現(xiàn)這個效果的最簡單的代碼，可能在ie下滾動的時候會有一點抖動，這個問題以后再解決了，先實現(xiàn)再說。

要點一：

var adtop = adleft.offsetTop;

獲得元素距離上邊的位置，在滾動的時候需要用到。

要點二：

復制代碼代碼如下:

adleft.style.top=adtop+(document.documentElement.scrollTop || document.body.scrollTop)+"px";

滾動時，給元素的上邊位置賦值為元素本身距離上邊的距離加上滾動的距離。

上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<style>
body{margin:0; padding:0}
#adleft,#adright{
width:30px;
height:100px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
#adleft{left:0; top:150px; }
#adright{right:0; top:150px;}
</style>
<script>
window.onload = function(){
 var adleft = document.getElementById("adleft");
 var adright = document.getElementById("adright");
 var adtop = adleft.offsetTop;
 window.onscroll = function(){
  adleft.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 
  adright.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 
 }
} 
</script>
</head>
<body style="height:2000px;">
<h1>左右廣告</h1>
<div id="adleft">左邊廣告</div>
<div id="adright">右邊廣告</div>
</body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章:

JavaScript實現(xiàn)按鍵精靈的原理分析
這篇文章主要介紹了JavaScript實現(xiàn)按鍵精靈的原理分析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
Extjs顯示從數(shù)據(jù)庫取出時間轉(zhuǎn)換JSON后的出現(xiàn)問題
后臺從數(shù)據(jù)庫取出時間，JSON格式化后再傳到gridpanel，這時時間變成了：/Date(32331121223)/這樣的格式,本文將詳細介紹解決Extjs顯示從數(shù)據(jù)庫取出時間轉(zhuǎn)換JSON后的出現(xiàn)問題
2012-11-11
webpack實用小功能介紹
這篇文章主要介紹了webpack實用小功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-01-01
簡單理解js的prototype屬性及使用
這篇文章主要介紹了簡單理解js的prototype屬性及使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
關于二級域名下使用一級域名下的COOKIE的問題
我們通常在使用cookie的時候一般都只是局限在本站內(nèi)使用，也就是只在一個域名下使用
2011-11-11
JavaScript實現(xiàn)點擊按鈕后變灰避免多次重復提交
注冊的時候需要發(fā)送驗證激活帳號的郵件，為了避免郵件的多次重復發(fā)送，所以可以在點擊了發(fā)送后，設置按鈕變灰，倒計時一段時間后又可重復點擊，具體實現(xiàn)如下，感興趣的朋友可以參考下哈
2013-07-07
JS解決ie6下png透明的方法實例
解決ie6下png透明的問題想必前端都比較清楚，雖然有很多方法，但是我覺得用JS還是最省事的方法，不管是圖片還是背景圖片都OK。
2013-08-08
深入理解requestAnimationFrame的動畫循環(huán)
這篇文章先給大家介紹了什么是requestAnimationFrame，而后才深入講述關于requestAnimationFrame的動畫循環(huán)，文章介紹的非常詳細，相信對大家學習requestAnimationFrame具有一定的參考借鑒價值，有需要的朋友下面來一起看看吧。
2016-09-09
javascript中for...of和for..in循環(huán)的區(qū)別
JS中循環(huán)語句眾多，你是否也有用的時候突然不知道用哪個的經(jīng)歷，本文主要介紹了javascript中for...of和for..in循環(huán)的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
微信小程序?qū)崿F(xiàn)驗證碼獲取倒計時效果
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)驗證碼獲取倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-02-02