為文章標題連結添加動態載入效果

 

很多朋友應該都會發現，在我的部落格裡移動和點擊標題都有一些動態效果，右移的效果請移步上次寫的文章《分享本站標題連結平滑右移效果》，今天寫的是點擊之後的那個動態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.     })   
16. });  

代碼說明：

1、$('.entry-title a')：單引號內要改成你自己的標題或者其他連結的CSS樣式名稱，切記！

2、var htm = 'Loading',：單引號內可以改成你想設定的文字。

3、setTimeout(ct, 150))   ：150是動態時間，按需修改。

4、當然，高手可以根據這個來修改更多的樣式。

 

原創連結：http://www.vsay.cn/title-links-add-loading-effect.html