很多網(wǎng)站的頁面都有漂浮的廣告效果，雖然煩人，但也確實(shí)起到了良好的宣傳效果。

各大代碼網(wǎng)站也有關(guān)于漂浮代碼的實(shí)例，很多存在著兼容性問題，不符合W3C標(biāo)準(zhǔn)，本站修復(fù)了兼容性問題，下面就簡單介紹一下如何實(shí)現(xiàn)此效果。

代碼如下:

 [HTML] 純文本查看 復(fù)制代碼 運(yùn)行代碼 
 
 
 
 
 
 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
 
 
 
 
<!DOCTYPEhtml> 
< 
html 
> 
< 
head 
> 
< 
meta 
charset 
= 
"utf-8" 
> 
< 
head 
> 
< 
title 
>浮動廣告</ 
title 
> 
< 
script 
type 
= 
"text/javascript" 
> 
window.onload=function(){ 
 
 
varx=50,y=60; 
 
varxin=true,yin=true; 
 
varstep=1; 
 
vardelay=10; 
 
varobj=document.getElementById("ad"); 
 
functionfloat(){ 
 
varL=T=0; 
 
varR=document.documentElement.clientWidth-obj.offsetWidth; 
 
varB=document.documentElement.clientHeight-obj.offsetHeight; 
 
obj.style.left=(x+document.body.scrollLeft||document.documentElement.scrollLeft)+"px"; 
 
obj.style.top=(y+document.body.scrollTop||document.documentElement.scrollTop)+"px"; 
 
x=x+step*(xin?1:-1); 
 
if(x<L){xin=true;x=L} 
 
if(x>R){xin=false;x=R} 
 
y=y+step*(yin?1:-1) 
 
if(y<T){yin=true;y=T} 
 
if(y>B){yin=false;y=B} 
 
} 
 
varflag=setInterval(float,delay) 
 
obj.onmouseover=function(){clearInterval(flag)} 
 
obj.onmouseout=function(){flag=setInterval(float,delay)} 
} 
</ 
script 
> 
< 
body 
> 
< 
div 
id 
= 
"ad" 
style 
= 
"position:absolute" 
> 
 
< 
a 
href 
= 
"#" 
target 
= 
"_blank" 
> 
 
< 
img 
src 
= 
"mytest/JS/ad.jpg" 
border 
= 
"0" 
> 
 
</ 
a 
> 
</ 
div 
> 
</ 
body 
> 
</ 
html 
>
 
 
 

圖片可以在文檔中隨機(jī)的漂浮，下面就簡單介紹一下如何實(shí)現(xiàn)此效果。

一.實(shí)現(xiàn)原理:

將div塊采用絕對定位，里面包裹著圖片，實(shí)際上是這個div塊進(jìn)行漂浮。然后通過定時器函數(shù)不斷調(diào)用float來實(shí)現(xiàn)div的漂浮效果，此函數(shù)能夠判斷div塊是否碰觸邊緣，然后再進(jìn)行位置調(diào)整。

二.代碼注釋:

（1）.window.οnlοad=function(){}，當(dāng)文檔完全加載完成再去執(zhí)行函數(shù)中的代碼。

（2）.var x=50,y=60，聲明兩個變量x和y用來存放漂浮div的初始坐標(biāo)。

（3）. var xin=true, yin=true，設(shè)置兩個標(biāo)志。

（4）.var step=1，設(shè)置div漂浮的幅度。

（5）.var delay=10，用來設(shè)置定時器函數(shù)執(zhí)行的時間間隔。

（6）.var obj=document.getElementById(“ad”)，獲取id屬性值為ad的對象。

（7）.function float(){}，此函數(shù)規(guī)定了div塊的漂浮原則。

（8）.var L=T=0，聲明兩個變量并賦值為零，用來判斷div塊是否已經(jīng)到達(dá)網(wǎng)頁的左邊緣和下邊緣。

（9）.ar R=document.documentElement.clientWidth-obj.offsetWidth，可見寬度減去div塊的寬度，也就是剩余空間的寬度。

（10）.var B=document.documentElement.clientHeight-obj.offsetHeight，可見高度減去div塊的高度，也就是剩余空間的高度。

（11）.obj.style.left=(x+document.body.scrollLeft||document.documentElement.scrollLeft)+”px”，用來規(guī)定div的left屬性值，之所以使用scrollleft是因?yàn)橛锌赡芫W(wǎng)頁的寬度過寬出現(xiàn)橫向滾動條，之所以使用||是為了消除瀏覽器兼容性問題。

（12）.obj.style.top=(y+document.body.scrollTop||document.documentElement.scrollTop)+”px”，這個和上面同理，不過方位不一樣。

（13）.x=x+step*(xin?1:-1)，計(jì)算x的值。

（14）.if(x < L){ xin = true; x = L} ，如果div塊到達(dá)網(wǎng)頁的左邊緣，如果是的話將xin的值設(shè)置為true，并且將x的值設(shè)置為L，即為零。

（15）.if(x > R){ xin = false; x = R} ，如果div塊到達(dá)網(wǎng)頁的右邊緣，則將xin的值色織為false，并將x的值的設(shè)置為r。

（16）.var flag=setInterval(float,delay) ，使用定時器函數(shù)調(diào)用float()函數(shù)。

（17）.obj.οnmοuseοver=function(){clearInterval(flag)} ，當(dāng)鼠標(biāo)放在div上，停止漂浮。

（18）.obj.οnmοuseοut=function(){flag=setInterval(float, delay)}，當(dāng)鼠標(biāo)離開，繼續(xù)漂浮。

總結(jié)

以上是生活随笔為你收集整理的浮动广告代码实例「建议收藏」的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。