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