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

很多朋友应该都会发现,在我的博客里移动和点击标题都有一些动态效果,右移的效果请移步上次写的文章《Wordpress分享本站标题链接平滑右移效果》,今天写的是点击之后的那个动态loading...的效果。两种的效果到主页点击标题就可以看见啦。

首先第一步要让网页加载jQuery库文件,不过现在基本上没有什么站没用到jQuery了,所以第一步可以省略。

但如果没有添加的话,可以在</head>标签前加入以下代码。

<script type="text/javascript" src="https://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是动态的时间,按需修改。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  1   博主  1   引用   1

  1. avatar 李亚奇 0

    没明白自己的标题是什么?解释下?

    • avatar 时空镜像

      @李亚奇 比如说边侧的友链,分类,文章模块等等的名字或CSS名称

  2. 来自外部的引用: 1

    • Wordpress分享本站标题链接平滑右移效果