jQuery 項卡標題欄閃爍提示新資訊

admin發表於2018-07-16
jQuery

相信大多數人都對這樣的效果不會陌生，當一個會員收到新的資訊的時候，標題部分出現閃爍的資訊。

下面通過程式碼例項介紹一下如何利用jQuery實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
;(function($) {
  $.extend({
    blinkTitle : {
      show : function() {
        var step=0, _title = document.title;
        var timer = setInterval(function() {
          step++;
          if (step==3) {step=1};
          if (step==1) {document.title='【　　　】'+_title};
          if (step==2) {document.title='【新訊息】'+_title};
        }, 500);
        return [timer, _title];
      },
      clear : function(timerArr) {
        if(timerArr) {
          clearInterval(timerArr[0]); 
          document.title = timerArr[1];
        };
      }
    }
  });
})(jQuery);
 
jQuery(function($) {
  var timerArr = $.blinkTitle.show();
  setTimeout(function() {
    $.blinkTitle.clear(timerArr);
  }, 10000);
});
</script>
</head>
<body>
<div id="box">注意觀看網頁標題欄</div>
</body>
</html>

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

一.程式碼註釋：

（1）.;(function($) {})(jQuery)，一個匿名自執行函式，前面的分號一般是用來在壓縮時候防止出錯。

（2）.$.extend({})，擴充套件jQuery物件。

（3）.blinkTitle : {}，擴充套件到jQuery物件的屬性。

（4）.show : function() {

  var step=0, _title = document.title;

  var timer = setInterval(function() {

    step++;

    if (step==3) {step=1};

    if (step==1) {document.title='【　　　】'+_title};

    if (step==2) {document.title='【新訊息】'+_title};

  }, 500);

  return [timer, _title];

}，此方法實現了標題欄閃爍效果。

var step=0，宣告一個變數用作判斷標題欄顯示何種內容的標識。

_title = document.title，獲取標題欄的內容。

再下面就是每個500毫秒置換一次title內容，於是就實現了閃爍效果。

（5）.clear : function(timerArr) {

  if(timerArr) {

    clearInterval(timerArr[0]);

    document.title = timerArr[1];

  };

}此方法可以聽停止閃爍效果。

（6）.jQuery(function($) {})，文件結構完全載入完畢再去執行函式中的程式碼。

（7）.var timerArr = $.blinkTitle.show()，開始閃爍效果。

（8）.setTimeout(function() {

  $.blinkTitle.clear(timerArr);

}, 10000)，可以在10000毫秒以後停止閃爍效果。

二.相關閱讀:

（1）.$.extend方法參閱$.extend()一章節。

（2）.setInterval方法參閱setInterval()一章節。

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

相關文章