萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 為文章標題鏈接添加動態載入效果

為文章標題鏈接添加動態載入效果

 為文章標題鏈接添加動態載入效果 三聯

很多朋友應該都會發現,在我的博客裡移動和點擊標題都有一些動態效果,右移的效果請移步上次寫的文章《分享本站標題鏈接平滑右移效果》,今天寫的是點擊之後的那個動態loading...的效果。兩種的效果到主頁點擊標題就可以看見啦。

首先第一步要讓網頁加載jQuery庫文件,不過現在基本上沒有什麼站沒用到jQuery了,所以第一步可以省略。

但如果沒有添加的話,可以在</head>標簽前加入以下代碼。

 
  1. <script type="text/javascript" src="http://jqueryjs.googlecode.com  
  2. /files/jquery-1.2.3.min.js"></script>  

第二步就是將下面這個代碼粘貼到網站中加載的其中一個JS文件裡,刷新一下,效果就出來了。

 
  1. /*-------------------------------------------------*/  
  2. /*  為文章標題鏈接添加動態載入效果
  3. /*-------------------------------------------------*/  
  4.   
  5. $(function() {   
  6.     $('.entry-title a').click(function(e) {   
  7.         e.preventDefault();   
  8.         var htm = 'Loading',   
  9.         i = 4,   
  10.         t = $(this).html(htm).unbind('click'); (function ct() {   
  11.             i < 0 ? (i = 4, t.html(htm), ct()) : (t[0].innerHTML += '.',    
  12. i--, setTimeout(ct, 150))   
  13.         })();   
  14.         window.location = this.href   
  15.     })   
copyright © 萬盛學電腦網 all rights reserved