新資訊提醒標題閃動詳解

admin發表於2018-09-19

當使用者有新的資訊提醒的時候，有時候會在標題欄中有閃動效果，非常的醒目，是很人性化的一個舉措。

下面就介紹一下jQuery如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head> 
<body> 
<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;
        var _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> 
</body> 
</html>

標題欄處會有閃動的效果，下面就介紹一下它的實現過程。

一.程式碼註釋:

（1）.(function($){}(jQuery)，宣告一個匿名函式並且執行此函式，引數是jQuery。

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

（3）.blinkTitle:{}，blinkTitle物件的一個屬性，不過它的屬性值依然是一個物件。

（4）.show:function(){}，執行閃動效果的函式。

（5）.var step=0;宣告一個變數並賦初值，在後面會用到。

（6）.var _title=document.title，將網頁的title值賦值給變數_title。

（7）.var timer=setInterval(function(){},500)，使用定時器函式每隔500毫秒執行一次函式，被執行的函式用來切換title值。

（8）.step++，每執行一次函式，變數值加1.

（9）.if(step==3){step=1}，如果值為3，則重置為1。

（10）.if(step==1){document.title='【　　　】'+_title}，如果等於1，設定title的值。

（11）.if(step==2){document.title='【新訊息】'+_title}，如果等於2，再一次設定title的值，這樣是不是就實現切換效果，看起來也就是視覺上的閃動。

（1）.return [timer,_title]，返回一個陣列，資料後面會用到。

（2）.clear:function(timerArr){}），此函式用來停止閃動效果，引數是show函式返回的陣列。

（3）.if(timerArr) {}，判斷是否存在

（4）.clearInterval(timerArr[0])，停止setInterval定時器函式的執行。

（5）.document.title=timerArr[1]，將標題設定為原來的值。

二.相關閱讀:

（1）.$.extend()可以參閱$.extend()函式用法一章節。

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

（3）.clearInterval()可以參閱clearInterval()方法一章節。

（4）.setTimeout()可以參閱setTimeout()方法一章節。

相關文章