跟隨滑鼠移動可關閉的漂浮圖片廣告

admin發表於2019-01-21

本章節分享一段程式碼例項，它實現了一種令人厭煩的廣告效果。

漂浮的圖片廣告能夠隨著滑鼠指標的移動而移動，不過具有點選關閉按鈕。

此種廣告形式當然讓人心煩，不過還是有不少客戶使用，所以事先的技巧我們還是要掌握的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ad{
  border:1px solid #000;
  background:#FFF;
  position:absolute;
  padding:24px 4px 4px 4px;
}
#title{
  position:absolute;
  right:2px;
  top:2px;
  cursor:pointer
}
</style>
<script type="text/javascript">
function badAD(html){
  var ad=document.body.appendChild(document.createElement('div'));
  ad.id="ad";
  ad.innerHTML=html;
  var span=ad.appendChild(document.createElement('span'));
  span.id="title";
  span.innerHTML="×";
  span.onclick=function (){
    document.onmousemove=null;
    this.parentNode.style.left='-99999px' 
  };
  document.onmousemove=function (e){
    var e=e||window.event;
    var x=e.clientX,y=e.clientY;
    setTimeout(function(){
      if(ad.hover)return;
      ad.style.left=x+5+'px';
      ad.style.top=y+5+'px';
    },120)
  }
  ad.onmouseover=function (){
    this.hover=true
  };
  ad.onmouseout=function (){
    this.hover=false
  }
}
window.onload=function(){
  badAD('<img src="demo/js/img/ad.jpg">');
}
</script>
</head>
<body>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下效果的實現過程。

一.程式碼註釋:

（1）.function badAD(html){}，此函式實現漂浮效果功能，引數是圖片的路徑。

（2）.var ad=document.body.appendChild(document.createElement('div'))，動態建立一個div並追加到body元素中。

（3）.ad.id="ad"，為建立的div設定id屬性。

（4）.ad.innerHTML=html，設定div元素中的內容。

（5）.var span=ad.appendChild(document.createElement('span'))，為div元素建立並附加一個span元素。

（6）.span.id="title"，為span元素設定id屬性值。

（7）.span.innerHTML="×"，設定span元素的內容，這個就是關閉按鈕的那個叉號標誌。

（8）.span.onclick=function (){

  document.onmousemove=null;

  this.parentNode.style.left='-99999px' 

}，為span元素註冊onclick事件處理函式。

document.onmousemove=null，刪除註冊在document上的事件處理函式。

this.parentNode.style.left='-99999px'，隱藏父元素，其實就是div元素，那麼也就相當於關閉廣告了。

（9）.document.onmousemove=function (e){

  var e=e||window.event;

  var x=e.clientX,y=e.clientY;

  setTimeout(function(){

    if(ad.hover)return;

    ad.style.left=x+5+'px';

    ad.style.top=y+5+'px';

  },120)

}，為document註冊onmousemove事件處理函式。

var e=e||window.event，相容所有瀏覽器的事件物件處理。

var x=e.clientX,y=e.clientY，獲取滑鼠在瀏覽器客戶區的座標。

setTimeout(function(){

  if(ad.hover)return;

  ad.style.left=x+5+'px';

  ad.style.top=y+5+'px';

},120)之所以使用setTimeout()方法就是為了所謂的函式節流效果，提高效率。

（10）.ad.onmouseover=function (){

  this.hover=true

}，為div註冊onmouseover事件處理函式，此事件處理函式能夠設定一個標識表示是否可以有跟隨效果。

（11）.ad.onmouseout=function (){

  this.hover=false

}，當滑鼠離開div的時候，那麼就不具有跟隨效果。

二.相關閱讀：

（1）.document.createElement()方法參閱JavaScript createElement()一章節。

（2）.innerHTML屬性參閱JavaScript innerHTML一章節。

（3）.parentNode屬性參閱JavaScript parentNode一章節。

（4）.var e=e||window.event參閱var ev=window.event||ev的作用是什麼一章節。

（5）.clientX屬性參閱JavaScript clientX一章節。

（6）.setTimeout()方法參閱JavaScript setTimeout()一章節。

相關文章