WordPress 文字移动特效

作者:admin发表时间:2010-10-7 评论:0 点击 2,430+

方法一:

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

你可能对以下内容感兴趣!

  1. CodeIgniter(CI)学习笔记整理
  2. 谷歌打不开,wordpress后台反应慢
  3. win7下配置nginx+php+mysql开发环...
  4. wordpress免费的备份插件BackUpWor...
  5. 谈一谈让wordpress更安全
  6. netbeans打开文件中文乱码
  7. wordpress添加自定义默认头像
  8. wordpress本地测试站开启伪静态

发表评论

*

w_0002.gif w_0009.gif w_0007.gif w_0011.gif w_0005.gif w_0008.gif w_0010.gif w_0003.gif w_0012.gif w_0001.gif w_0006.gif