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

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

今天分享的是前端开发中点击之后的那个动态loading…的效果。两种的效果到主页点击标题就可以看见啦。
首先第一步要让网页加载jQuery库文件,不过现在基本上没有什么站没用到jQuery了,所以第一步可以省略。
但如果没有添加的话,可以在标签前加入以下代码。

199392_120234481000_2

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

第二步就是将下面这个代码粘贴到网站中加载的其中一个JS文件里,刷新一下,效果就出来了。
/*-------------------------------------------------*/  
/* 为文章标题链接添加动态载入效果
/*-------------------------------------------------*/

$(function() {
$('.entry-title a').click(function(e) {
e.preventDefault();
var htm = 'Loading',
i = 4,
t = $(this).html(htm).unbind('click'); (function ct() {
i < 0 ? (i = 4, t.html(htm), ct()) : (t[0].innerHTML += '.',
i--, setTimeout(ct, 150))
})();
window.location = this.href
})
});


代码说明:

1、$(‘.entry-title a’):单引号内要改成你自己的标题或者其他链接的CSS样式名称,切记!

2、var htm = ‘Loading’,:单引号内可以改成你想设置的文字。

3、setTimeout(ct, 150)) :150是动态的时间,按需修改。

4、当然,高手可以根据这个来修改更多的样式。

[整理:CALONYE.COM]