jQuery 折腾小记

“Wordpress是一个要不断折腾的程序”,是的,自从爱上了强大的jQuery以后,对Wordpress的折腾一发不可收拾。如果要找个折腾的理由,那么我想说:jQuery库这么大,要物尽其用嘛。

超链接向右侧平滑移动

其效果见侧栏除标签云的任何超链接,鼠标放上去后会向右侧平滑移动5px。

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

超链接的载入提示

以前发过一篇文章《超链接的载入提示》,大家看这里就可以了。

点击后显示 EMAIL

为了公开自己的Email却又不想让软件搜索到,大家常用的办法就是把EMAIL地址弄成图片的形式发布出来,这样的话基本就不会被搜索到了。但是有个问题,就是真正想发给你的人不能复制你的邮箱,只能对着上面一个字一个字的敲出来,这样是不是很麻烦?下面这段代码的作用就是让大家贴出文本EMAIL,却又不能被搜索到的方法。

$(".myemail").click(function() {
    var A = "i";
    var B = "jan.cm";
    var C = A + "@" + B;
    $(this).hide();
    setTimeout(function() {
        var D = $(".myemail");
        D.next().hide();
        D.text(C);
        D.attr("href", "mailto:" + C).unbind("click");
        D.fadeIn(1000)//这个1000是淡出的时间,单位毫秒;
    },1)
});

图片悬停半透明

效果大家把鼠标放在侧栏上面的广告图片或者用户评论排行榜的头像上就看得到,鼠标放上去后会出现半透明的效果。

$('img').hover(function() {
    $(this).animate({
        'opacity': .5//鼠标放上去后,透明度50%;
    })
},function() {
    $(this).animate({
        'opacity': 1//鼠标移除后,不透明;
    })
});

超链接新窗口打开

如果一个超链接不去设置target属性为新窗口打开的话,那么这些超链接点击后都会在原窗口打开,这样的话用户体验感很不好,以前我的做法是装了一个插件,但是作为喜欢折腾的人,插件能少一个是一个。用jQuery简单的一句代码就能搞定这个问题,何乐而不为呢?

$('a)').attr({
    target: "_blank"
});

相关日志显示隐藏

点击相关日志,可以使相关日志隐藏或者显示,这个纯属好玩。

$(".related_post_title").click(function(){
$(".related_post").slideToggle("slow");
})

这里还有一个加强版的,使用Cookie来记录用户的操作,点击隐藏后,下次再进入到相关页面,将会一直隐藏,直到Cookie过期或者用户自己再次点击显示。使用加强版还需要加载一个jQuery的插件jQuery.cookie.js,另外非常郁闷,jQuery这么强大的库为什么就没有操作Cookie的相关函数呢?

if ($.cookie('relatedposts') == 'hide') {
    $(".related_post").hide()
} else {
    $(".related_post").show()
}
$(".related_post_title").click(function() {
    $(".related_post").slideToggle("slow");
    if ($.cookie('relatedposts') == 'hide') {
        $.cookie('relatedposts', 'show', {
            expires: 72 * 60 * 60,//Cookie的生命周期,单位毫秒,下面一样的;
            path: '/'
        })
    } else {
        $.cookie('relatedposts', 'hide', {
            expires: 72 * 60 * 60,
            path: '/'
        })
    }
});

这里要注意的是选择器的问题,上面的代码,全部都是$('XXX')开头,这些就是选择器,选择哪些地方起到作用,如果有不明白的去这里的帮助文档文件夹下载一个jQuery的帮助文档看看吧,欢迎大家多多交流。

就写这么多吧,其实还有一些,不过那些基本都是直接Copy过来的,自己也没研究过,或者是没研究明白。以后还继续折腾,比如页面载入提示、当前页面的锚记平滑滚动、滑过评论显示回复按钮等等,很多很多等着我折腾呢,呵呵。

THE END
折腾wordpressjqueryhack
简单方法开启 Gzip 压缩
简单的分享与收藏

添加评论

已有 37 条评论

由 Google AI Gemini Pro 生成

博主的jQuery折腾小记很有趣,通过简单的代码实现了超链接的平滑移动、超链接的载入提示、点击后显示邮箱、图片悬停半透明、超链接新窗口打开、相关日志显示隐藏等功能。博主把这些功能运用到自己的博客中,让博客的交互性更强,用户体验感更好。期待博主继续折腾,带来更多有趣的功能。

逸冰
逸冰 2010-06-29 08:31 回复
浙江 Windows XP Firefox

看来jQuery真的好强大哦

冰剑
冰剑 MOD 2010-06-30 21:26 回复
湖南 Windows 7 Firefox

是很强大,选几个应用吧,哈哈。

万戈
万戈 2010-06-29 20:15 回复
上海 Windows XP Firefox

这个我喜欢啊,jquery的强大永远也学不完

冰剑
冰剑 MOD 2010-06-30 21:26 回复
湖南 Windows 7 Firefox

很多都是在你那学习的,还要感谢你。

Firm
Firm 2010-06-29 22:12 回复
福建 Windows XP Chrome

5PX看不太出来

冰剑
冰剑 MOD 2010-06-30 21:26 回复
湖南 Windows 7 Firefox

5PX还看不出来那就是你自己的问题了。

丕子
丕子 2010-06-30 16:27 回复
山东 Windows XP Firefox

嗯 最近也一直在学习这个

冰剑
冰剑 MOD 2010-06-30 21:26 回复
湖南 Windows 7 Firefox

我们共同学习。。

维C生活
维C生活 2010-06-30 19:41 回复
北京 Windows 7 Internet Explorer

很实用,顶了,多谢分享

扣扣网
扣扣网 2010-06-30 19:41 回复
湖北 Windows XP Internet Explorer

多学是好事,可惜我现在想学都没时间了。支持博客继续开发 哈哈 :???:

冰剑
冰剑 MOD 2010-06-30 21:26 回复
湖南 Windows 7 Firefox

时间就像乳沟,挤挤总会有的。

丕子
丕子 2010-07-01 08:00 回复
山东 Windows XP Firefox

$(document).ready(function(){

$('#close-sidebar').click(function() {
alert("aa");
});
});

关闭

没有效果 请问是能有啥原因? jquery引用进来了

冰剑
冰剑 MOD 2010-07-01 10:14 回复
湖南 Windows 7 Firefox

你是放在了jquery的前面还是后面啊,这要放在后面才会有效,否则找不到$函数的。

丕子
丕子 2010-07-01 11:56 回复
山东 Windows XP Firefox

放在后面了

海天无影
海天无影 2010-07-01 11:30 回复
江苏 Windows XP Firefox

那个右移的还是有点bug 会和有的jQ的Tab栏冲突 所以我去掉了~

丕子
丕子 2010-07-01 11:58 回复
山东 Windows XP Firefox

对了 你写写在文章页面中把 侧边栏隐藏了吧 我写的一直没效果 已进入文章页面就没有侧边栏这个功能 我试验了好几次都不行

冰剑
冰剑 MOD 2010-07-01 12:01 回复
湖南 Windows 7 Firefox

隐藏侧边栏,五木那里有很多文章http://immmmm.com/close-show-sidebar-prefect-code.html,你看看吧。

丕子
丕子 2010-07-01 16:58 回复
山东 Windows XP Firefox

都看了 哎 感觉方法没错 但是inove的主题是不是有关

冰剑
冰剑 MOD 2010-07-01 17:01 回复
湖南 Windows 7 Firefox

晚上我折腾一下自己的主题试试,弄好了再告诉你。

冰剑
冰剑 MOD 2010-07-01 17:41 回复
湖南 Windows 7 Firefox

去掉了侧栏后,要在 #container 加个 class 样式,这是 inove 本身就有的。
用jquery简单的写就是

$("#sidebar").hide(); $("#container").addClass("one-column");

不过这样没有按钮,也没有动态效果,自己慢慢改吧,关键就是那个 class 样式。

老七
老七 2010-07-01 21:53 回复
江西 Windows XP Internet Explorer

好厉害 一个不会~~

冰剑
冰剑 MOD 2010-07-02 19:00 回复
湖南 Windows 7 Firefox

慢慢折腾呗,我也是在折腾中学习的。

寨主
寨主 2010-07-02 11:08 回复
浙江 Windows XP Firefox

额,不知道怎么用。

冰剑
冰剑 MOD 2010-07-02 19:00 回复
湖南 Windows 7 Firefox

确实没写明用法,但这些都是核心的代码,你只要学会使用一种,其他的就迎刃而解了。

彼岸星辰
彼岸星辰 2010-07-02 11:28 回复
陕西 Windows XP Internet Explorer

被你把我的头像从首页给折腾不见了。我再来一次。

冰剑
冰剑 MOD 2010-07-02 19:00 回复
湖南 Windows 7 Firefox

额,那个排行榜每个月月初就会重新统计的。

权子
权子 2010-07-03 22:13 回复
浙江 Windows XP Chrome

来踩踩~~~

苏扬
苏扬 2010-07-04 12:53 回复
浙江 Windows XP Opera

怎么高手全在折腾jquery啊,看来我也要学学!

拆墙部队
拆墙部队 2010-07-17 08:57 回复
上海 Windows 7 Chrome

锋利的 JQ 好东西,我说以后叫 JavaQcript 好了,这单词,多带劲。JavaScript 啊啊啊啊。

随缘
随缘 2010-08-10 10:29 回复
安徽 Windows XP Firefox

我的邮箱点击显示也搞不出来 :shock:

冰剑
冰剑 MOD 2010-08-10 13:45 回复
湖南 Windows XP Chrome

有没有导入jQuery库啊?没导入JQ库是不能用的。

snowxh
snowxh 2010-08-14 00:47 回复
天津 Windows Vista Firefox

哦哦 jQuery我超爱的(^o^)/
木木的点击关闭侧边栏代码不规范- -
我居然敢说这种话 今天在一个小盆友的帮助下完善成最规范的了。。

冰剑
冰剑 MOD 2010-08-14 01:08 回复
湖南 Windows 7 Firefox

我也很喜欢JQ,太强大了,哈哈。。
你家很多地方有木木家的影子,比如侧栏的tabbox,顶部的导航。。。。

snowxh
snowxh 2010-08-14 01:18 回复
天津 Windows Vista Firefox

尴尬尴尬 导航想要lavalamp弄不出来= =#
木木是俺jQuery启蒙老师 等俺成熟鸟超越他就木有影子了
抽搐- -^我在说什么!

冰剑
冰剑 MOD 2010-08-14 01:21 回复
湖南 Windows 7 Firefox

去看看iNove的教程,说不定有帮助。。
我起初学习JQ的时候也常在木木那里看他的日志,学到了很多。。

N
N 2010-08-18 11:06 回复
江苏 Windows XP Chrome

Jquery改变了很多淫写代码的方式捏

无冷
无冷 2011-04-15 19:46 回复
四川 Mac OS X Chrome

这个有几个还没折腾过,

移动设备上继续阅读