网站美化：免插件实现，文章标题平滑移动特效

2018年1月14日21:11:20 发表评论 673 °C

摘要

当鼠标移动到文章标题的时候，会往右平移一段距离。

网站美化：免插件实现，文章标题平滑移动特效

一、前言

当鼠标移动到文章标题的时候，会往右平移一段距离。

效果如下图所示：

二、代码部署

把下面的js代码复制添加到自己网站主题的任意一个加载使用的js代码文件中。

/* 文章标题平移效果*/
jQuery(document).ready(function($){
$('.list-title a ,.entry-title a,.nav-single a,.widget ul li a').hover(function() {
$(this).stop().animate({'left': '10px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});
});

/* 文章标题平移效果*/

jQuery(document).ready(function($){

$('.list-title a ,.entry-title a,.nav-single a,.widget ul li a').hover(function() {

$(this).stop().animate({'left': '10px'}, 'fast');

}, function() {

$(this).stop().animate({'left': '0px'}, 'fast');

});

然后在style.css中增加以下代码，知更鸟主题的用户可以添加到外观->主题设置->定制风格->自定义样式里面。

.list-title a,.widget.like_most_img ul li a,.widget.hot_post_img ul li a,.widget.recent_comments ul li a,.widget.hot_comment ul li a{position:relative;}

1	.list-title a,.widget.like_most_img ul li a,.widget.hot_post_img ul li a,.widget.recent_comments ul li a,.widget.hot_comment ul li a{position:relative;}