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');
});

  第三步,加入以下 CSS:

.sidebar li a {position:relative;}

  效果相同,代码当然是越短越好啦,不错不错~

本文已盖 111 层楼

  1. 折腾了一下,不过发现在IE下我的相关日志那里,本来所有链接都是一行一行的显示,(一条链接一行显示,多余的字符会自动隐藏)但是发现加了这个效果后,多余的文字全跑出来了,而你这里的相关日志处都没问题呢?我看你也有几篇日志显示不完,隐藏了部分文字啊。

  2. 这个效果好玩,折腾下去!

  3. 回复 Heson 说:

    我搞定了~~~谢谢 又学习了 哈哈 :razz:

  4. 回复 羽中 说:

    缩水版的效果不行,只平移单个元素,我那个主题不好看

  5. 万戈,问个傻瓜问题怎么调入JQuery库呢?

  6. 回复 sixi 说:

    请问把代码放在什么文件啊

  7. 这样显得博客更精致了,喜欢

  8. 回复 aion 说:

    不会程序,周末按照方法做一次,看能不能成功!

  9. 回复 小辉网 说:

    :mad: 我把代码添加到heard了。css也加了。不知道对不对。失败了。

  10. 回复 Jason 说:

    :shock:
    wordpress菜鸟来看看。。。。
    确实是个学习的好地方哦 :mrgreen:

  11. 回复 林木木 说:

    不知道原代码万哥哪弄来的哦,愣是没看懂前面一大堆代码……后面简介的就好多了!

  12. 回复 keelii 说:

    嗯。很不错哈。我得先把JS搞清楚了先~

  13. 回复 Google不爱我 说:

    发现灌水最正常的是IE…… :arrow:

  14. 回复 说:

    :twisted: 捣鼓一阵还是成功了.M你Q结果你没在,自己动手丰效足果 :lol:

  15. 回复 sosohehe 说:

    强大的JQuery被你一点点的给占有了

  16. 回复 zwwooooo 说:

    越来越多特效了,我刚好相反,正在慢慢减少特效

  17. 回复 那么蓝 说:

    真是神奇,我连css都没学明白呢~~~

    问:要简单学习一下JQuery需要什么基础么?

  18. 回复 Nox 说:

    万戈兄的新主题如何了?

  19. 回复 A.shun 说:

    好炫啊。。jq我还不会用 :roll:

  20. 这个可以试试,话说前面那个显示评论发布时间的效果怎么找都找不到
    不知道这次的能不能弄好 :twisted:

  21. 回复 smigoo 说:

    hiro那个更好~~~~ :razz: :razz:
    哈哈~~JQ我不怎么会 :cry: ...要好好学习啦~

  22. 回复 午夜 说:

    老弟,今天是不是一直在调整啊,效果一个一个的。

  23. 回复 cyusyu 说:

    都是高手啊,jquery一点也不懂

  24. 回复 皓辰 说:

    :smile: 阿木用过这效果,挺好!

  25. 回复 hiro 说:

    你也挺浪费的,没那么复杂。
    只需
    css:
    .sidebar li a { position:relative;}
    js:
    $('.sidebar li a').hover(function() {
    $(this).stop().animate({'left': '5px'}, 'slow');
    }, function() {
    $(this).stop().animate({'left': '0px'}, 'slow');
    });
    即可实现,效果请看我的友情链接的移动效果

  26. 回复 LAONB 说:

    边距要控制好,要不然冒出去就不好看了,你的侧边栏好宽阔。

  27. 回复 笑话 说:

    火速过来围观下~~ :mrgreen: :mrgreen:

  28. 回复 shaynez 说:

    因为工作的原因,以前接触extjs很多,jquery倒是没有用过,今年打算开始学jquery了,嘿嘿~

  29. 回复 hzlzh 说:

    :roll: 觉得超链的字体阴影CSS效果更佳,呵呵

  30. 听说前几天的时候WP官网DOWN机,导致很多的博客无法正常运作了,不知道Life的博客有没有受影响?

  31. 回复 星网 说:

    哈哈 :mrgreen: 自己打符号打出来了~!

  32. 回复 星网 说:

    我从头看了两遍~~还是没有明白这是啥效果~~!
    我只知道表情发不出来了~~怎么点都点不出来~! :cool:

  33. 什么效果啊 我咋弄不出来。。。不会是WIN7的事吧。。。额,表情在IE8下点着好像没用了 啊 崩溃

  34. 回复 吖Bee 说:

    Chrome 5.X表示没有效果....点击”调至评论“,按表情没反应... = =
    这个....我明天在来看看....

  35. 回复 Google不爱我 说:

    发现无论在哪留评论的地方都是显示名字及邮箱地址的啊,这个是明天的内容?还是以前那个“更改用户”链接比较清爽,嗯嗯。

  36. 活着就是折腾,你还真有闲心弄这些东西啊。

  37. 回复 少杰 说:

    万戈啊,现在有没准折腾微波啊。我昨天用我的古董机天宇A995大屏手写的下来了UC7.1,上微波好爽啊,手指滑屏。

  38. 回复 少杰 说:

    我日,我挂了半小时都没抢都沙发。 :mad: :mad: :mad:

  39. 回复 闪闪的星 说:

    沙`发

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析