WordPress 之链接平移 JQuery 特效
前段时间给 WordPress 添加了页面载入中提示效果,这是一个 JQuery 的特效,使用前必须先加载一下几十K之巨的 JQuery 库,而我整个 WordPress 也就这么一个地方利用到了 JQuery 库,如果不充分利用起来似乎有些浪费,所以今天又加上了两个。
主要介绍下 mouseover 链接右平移效果。本人表达能力比较差,所以还是直接看效果吧,请见侧边栏。将鼠标移至无序列表的链接上,就会发现文本链接向右移动了一下下,鼠标移开后,又恢复至原位。
方法如下:
1、载入 JQuery 库,个人比较喜欢 JQuery 1.2系列的版本,短小精悍,太大浪费,俺用不到。
2、关键代码:
jQuery.fn.nudge = function(a) {a = jQuery.extend({amount: 20,duration: 300,property: "padding",direction: "left",toCallback: function() {},fromCallback: function() {}},a);this.each(function() {var h = jQuery(this);var e = a;var d = e.direction;var g = e.property + d.substring(0, 1).toUpperCase() + d.substring(1, d.length);var c = h.css(g);var f = {};f[g] = parseInt(e.amount) + parseInt(c);var b = {};b[g] = c;h.hover(function() {h.stop().animate(f, e.duration, "", e.toCallback)},function() {h.stop().animate(b, e.duration, "", e.fromCallback)})});return this};jQuery(".sidebar li a").nudge({property: "padding",direction: "left",amount: 6,duration: 166});
其中 .sidebar li a 就是控制需要移动的链接,可以看到我这里只要求侧边栏无序列表的链接移动,如果要整站效果,那就直接一个 a 就可以了,如果还需指定添加其他部分,就用半角逗号隔开,如.sidebar li a,h2 a
另外还需要注意的就是加载顺序,JQuery 库是老大,必须放在前面,Over~
2月20日 更新:
感谢 hiro 同学,他又提供了一个代码更加简洁,效果完全相同的方法,第一步还是载入 JQuery 库,第二步是加入以下 JS。
$('.sidebar li a').hover(function() {
$(this).stop().animate({'left': '5px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});
$(this).stop().animate({'left': '5px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});
第三步,加入以下 CSS:
.sidebar li a {position:relative;}
效果相同,代码当然是越短越好啦,不错不错~
-
JQ 完善 Wordpress 友链的 Favicon2010年02月21日 -
个性化 Wordpress 侧边栏2009年06月27日 -
jQuery 水平拖动效果2011年03月4日 -
Wordpress 速度优化之 WP-PostViews 插件2011年02月9日