最新消息:

为文章标题链接添加平滑右移效果和加载中提示

WordPress 观测者 1483浏览

细心的朋友会发现,当访客鼠标移至本站文章标题链接时会有一个轻微的平滑右移效果,并且点击后会有短暂的“正在努力加载中……”的提示,这两种效果是如何实现的呢?下面将就此效果为大家讲解。

第一步要让我们使用的主题加载jQuery库文件,不过现在的主题应该都加载了jQuery库,检查方法:查看网页源代码,CTRL+F查找“jquery.min.js”,如果有则跳过此步。

第二步将以下代码追加到主题使用的通用JS文件中,所谓通用JS文件即主题任意页面都会加载的JS文件。(HotNews主题为custom.js)

/*-------------------------------------------------*/
/* 为文章标题链接添加平滑右移效果
/*-------------------------------------------------*/
jQuery(document).ready(function($){
$('.box_entry_title h2 a,.box_entry_title_h h2 a,.cat_post_box ul li a,.archive_title_box h2 a,.tab_latest ul li a,.hot_a h2 a,.hot_b ul li a,.cat_name_h a ').hover(function() {
//改成你标题的样式名称,可以应用多个链接,用逗号隔开
$(this).stop().animate({'marginLeft': '10px'}, 200);
//鼠标移动到链接上的平滑效果,200是毫秒
}, function() {
$(this).stop().animate({'marginLeft': '0px'}, 200);
//鼠标离开链接后的平滑效果
});
});
/*-------------------------------------------------*/
/* 为文章标题链接添加动态加载效果
/*-------------------------------------------------*/
$(document).ready(function(){
$('.box_entry_title h2 a,.box_entry_title_h h2 a,.cat_post_box ul li a,.archive_title_box h2 a,.tab_latest ul li a,.hot_a h2 a,.hot_b ul li a,.cat_name_h a ').click(function(){
//同上,注意修改.entry-title a为你自己的样式
$(this).text('正在努力加载中...');
//加载中文本提示,可修改为你喜欢的,如Loading...
window.location = $(this).attr('href');
});
});

通过以上两步就可以实现本文讲解的“为文章标题链接添加平滑右移效果和加载中提示”效果了。

注意事项:添加代码前阅读代码中的注释,理解代码含义。标题链接的CSS样式可通过查看网页源代码得知,即靠近<a>标签最近的一个<div class=123>或<div id=123>,其中的123即为你的CSS样式。如没有还需手动修改主题文件,为文章标题链接的<a>标签添加<div>CSS样式。

还需注意如果是<div id=123>,代码中'.entry-title a'应修改为'#entry-title a',即'#123 a'。

转载请注明:观测者 » 为文章标题链接添加平滑右移效果和加载中提示