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

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

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

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

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

要點(diǎn)一：

var adtop = adleft.offsetTop;

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

要點(diǎn)二：

復(fù)制代碼代碼如下:

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

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

上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標(biāo)題文檔</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程序設(shè)計有所幫助。

您可能感興趣的文章:

js
廣告

相關(guān)文章

Bootstrap的class樣式小結(jié)
本文給大家總結(jié)了bootstrap的class樣式，由基礎(chǔ)到內(nèi)涵給大家介紹的非常詳細(xì)，需要的的朋友可以參考下
2016-12-12
JavaScript中join()、splice()、slice()和split()函數(shù)用法示例
這篇文章主要介紹了JavaScript中join()、splice()、slice()和split()函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了join()、splice()、slice()和split()函數(shù)的功能、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
2018-08-08
onmouseover事件和onmouseout事件全面理解
最近兩天在溫習(xí)onmouseover事件和onmouseout事件，其實(shí)里面有很多深奧的知識，接下來小編給大家?guī)砹薿nmouseover事件和onmouseout事件全面了解，感興趣的朋友一起看下
2016-08-08
移動端觸摸滑動插件swiper使用方法詳解
這篇文章主要為大家詳細(xì)介紹了移動端觸摸滑動插件swiper的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
bootstrap datepicker的基本使用教程
這篇文章主要介紹了bootstrap datepicker的基本使用教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-07-07
JavaScript中日期函數(shù)的相關(guān)操作知識
日期函數(shù)是我們經(jīng)常用到的知識點(diǎn)，下面通過本文給大家介紹JavaScript中日期函數(shù)的相關(guān)操作知識，非常不錯，感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
JS簡單編號生成器實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS簡單編號生成器實(shí)現(xiàn)方法,涉及JavaScript針對表單與字符串操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-04-04
計算100000數(shù)組js腳本的執(zhí)行時間
計算100000數(shù)組js腳本的執(zhí)行時間...
2006-10-10
Js判斷參數(shù)(String,Array,Object)是否為undefined或者值為空
在一些前端控件要提交數(shù)據(jù)到服務(wù)器端的數(shù)據(jù)驗(yàn)證過程中，需要判斷提交的數(shù)據(jù)是否為空。如果是普通表單的字符串?dāng)?shù)據(jù)，只需要在 trim 后判斷 length 即可，而這里需要的數(shù)據(jù)可以是各種不同的類型，通過 JSON.stringify(data) 進(jìn)行序列化后再傳遞
2013-11-11
JS實(shí)現(xiàn)簡單控制視頻播放倍速的實(shí)例代碼
這篇文章主要介紹了通過JS來實(shí)現(xiàn)簡單控制視頻播放倍速,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04