您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

为文章标题链接添加动态载入效果

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 为文章标题链接添加动态载入效果 三联

很多朋友应该都会发现,在我的博客里移动和点击标题都有一些动态效果,右移的效果请移步上次写的文章《分享本站标题链接平滑右移效果》,今天写的是点击之后的那个动态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.     })