WordPress 文字移动特效
发表时间:2010-10-7 评论:0 点击 3,017+
方法一：
1、载入 JQuery 库！
2、在js中加入如下代码：
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 库!
第二步是加入JS代码如下：
$('.sidebar li a').hover(function() {
$(this).stop().animate({'left': '5px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});
第三步，加入以下 CSS：
.sidebar li a {position:relative;}
好了，现在你可以看看效果如何！
0
0