JavaScript浮動廣告程式碼例項

admin發表於2017-10-30
JavaScript

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

各大程式碼網站也有關於漂浮程式碼的例項，很多存在著相容性問題，不符合W3C標準，本站修復了相容性問題，下面就簡單介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>漂浮程式碼-螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var x=50,y=60; 
  var xin=true, yin=true; 
  var step=1; 
  var delay=10; 
  var obj=document.getElementById("ad"); 
  function float(){ 
    var L=T=0;
    var R=document.documentElement.clientWidth-obj.offsetWidth; 
    var B =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 } 
  } 
  var flag= 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>

圖片可以在文件中隨機的漂浮，下面就簡單介紹一下如何實現此效果。

一.實現原理:

將div塊採用絕對定位，裡面包裹著圖片，實際上是這個div塊進行漂浮。然後通過定時器函式不斷呼叫float來實現div的漂浮效果，此函式能夠判斷div塊是否碰觸邊緣，然後再進行位置調整。

二.程式碼註釋:

（1）.window.onload=function(){}，當文件完全載入完成再去執行函式中的程式碼。

（2）.var x=50,y=60，宣告兩個變數x和y用來存放漂浮div的初始座標。

（3）. var xin=true, yin=true，設定兩個標誌。

（4）.var step=1，設定div漂浮的幅度。

（5）.var delay=10，用來設定定時器函式執行的時間間隔。

（6）.var obj=document.getElementById("ad")，獲取id屬性值為ad的物件。

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

（8）.var L=T=0，宣告兩個變數並賦值為零，用來判斷div塊是否已經到達網頁的左邊緣和下邊緣。

（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"，用來規定div的left屬性值，之所以使用scrollleft是因為有可能網頁的寬度過寬出現橫向滾動條，之所以使用||是為了消除瀏覽器相容性問題。

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

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

（14）.if(x < L){ xin = true; x = L} ，如果div塊到達網頁的左邊緣，如果是的話將xin的值設定為true，並且將x的值設定為L，即為零。

（15）.if(x > R){ xin = false; x = R} ，如果div塊到達網頁的右邊緣，則將xin的值色織為false，並將x的值的設定為r。

（16）.var flag=setInterval(float,delay) ，使用定時器函式呼叫float()函式。

（17）.obj.onmouseover=function(){clearInterval(flag)} ，當滑鼠放在div上，停止漂浮。

（18）.obj.onmouseout=function(){flag=setInterval(float, delay)}，當滑鼠離開，繼續漂浮。

相關文章