WordPress链接平滑移动特效 | 沈超飞的IT博客

文章目录

前言
实现效果
特效代码

前言

WordPress实现JQuery鼠标放上后链接平滑移动效果

实现效果

在不少wordpress博客里都有链接平移的特效，比如我的博客就是，就是在鼠标移动到链接上的时候，链接平滑移动，效果如下图：

特效代码

本文只教大家通过代码添加该特效，因为直接使用代码轻量，快速。

1.在所用主题的 style.css 文件里添加下面一句代码(这是全站链接应用，如果只想部分链接应用，于其前面加入其它控制符)：

web</a>kit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 15px !important;">
a{position:relative;}

1	a{position:relative;}

2.在主题所调用的 .js文件里加入以下代码：

jQuery(document).ready(function($){ 
$('a').hover(function() { 
$(this).stop().animate({'left': '5px'}, 'fast'); 
}, function() { 
$(this).stop().animate({'left': '0px'}, 'fast'); 
}); 
});

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

$('a').hover(function() {

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

}, function() {

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

});

就这么简单，你学会了吗？如果有不会，可以联系我。

//下面这个css和插件后台设置的主题有关系，如果需要换样式，则需要修改以下CSS名称

前言

实现效果

特效代码

相关文章

5 条评论