• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~! QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.
  • 本站系统镜像均来自于官方原版,ed2k可视为P2P下载链接。所有操作系统默认均为试用版,如有正版密钥可以有效激活,本站不提供任何激活和相关服务。

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

WP其他 奇跡の海 10个月前 (12-17) 294次浏览 已收录 0个评论 扫描二维码

简介

让文章标题链接添加动态载入效果
前端开发中点击之后的那个动态 loading…的效果。两种的效果到主页点击标题就可以看见啦。

实现步骤

第一步

首先第一步要让网页加载 jQuery 库文件,不过现在基本上没有什么站没用到 jQuery 了,所以第一步可以省略。
但如果没有添加的话,可以在标签前加入以下代码

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

<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]


版权声明:本站所有文章和资源使用BY-NC-SA协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->让文章标题链接添加动态载入效果!在下边可以分享本文哦!
本文最后更新于2018年3月14日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
喜欢 (0)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址