北极寒流 » 网络资源 » 简单实现WordPress 链接平移特效 - 2010.08.17

简单实现WordPress 链接平移特效

来壹品集的应该都看见了,博客有有一个挺拉风的JQuery 特效(试试用你的鼠标放在右边的侧边栏上,发现链接都自动平移一段距离了吧?)这就是标题所谓的WordPress链接平移特效了。特效挺拉风,但是实现的代码很简单。几句就搞定。

第一步还是载入 JQuery 库,第二步是加入以下 JS。关于载入JQuery 库和如何使用下面的JS,不明白的可以参考这里

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

其中 .sidebar li a 就是控制需要移动的链接,如果要整站效果,那就直接一个 a 就可以了,如果还需指定添加其他部分,就用半角逗号隔开,如.sidebar li a, .post h2 a

第三步,加入以下 CSS:

.sidebar li a {position:relative;}

CSS中的.sidebar li a也要和JS中的一样,有多个也是和上面的一样以逗号隔开,如.sidebar li a, .post h2 a

把修改好的文件传上去,你就可以看见酷酷的链接平移效果了。

资料来源:http://wange.im/mouseover-link-slide-for-wordpress.html

评论关闭