jQuery 折腾小记

hack wordpress
移动设备上继续阅读
目录
  1. 超链接向右侧平滑移动
  2. 超链接的载入提示
  3. 点击后显示 EMAIL
  4. 图片悬停半透明
  5. 超链接新窗口打开
  6. 相关日志显示隐藏

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

超链接向右侧平滑移动

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

1
2
3
4
5
6
7
8
9
$('a').hover(function() {
    $(this).stop().animate({
        'left': '5px'
    },'fast')
},function() {
    $(this).stop().animate({
        'left': '0px'
    },'fast')
});

超链接的载入提示

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

点击后显示 EMAIL

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".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)
});

图片悬停半透明

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

1
2
3
4
5
6
7
8
9
$('img').hover(function() {
    $(this).animate({
        'opacity': .5//鼠标放上去后，透明度50%；
    })
},function() {
    $(this).animate({
        'opacity': 1//鼠标移除后，不透明；
    })
});

超链接新窗口打开

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

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

相关日志显示隐藏

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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过来的，自己也没研究过，或者是没研究明白。以后还继续折腾，比如页面载入提示、当前页面的锚记平滑滚动、滑过评论显示回复按钮等等，很多很多等着我折腾呢，呵呵。