西门的后花园

一个热爱网络的年轻人的博客

jQuery实现WordPress读者墙、排行榜图片放大效果

开始先打个岔。作为一名敲代码的人员,我已经两个多月没有折腾博客了,可以翻翻我“折腾博客”目录下面的文章。而一位名叫求索阁的朋友,前天今天都在我的留言板里留言我说没折腾博客,原来我的懒惰影响到大家的不满啦…赶紧发个准备放到自己写的主题里面的小效果出来,不然再被人骂就很丢人了!(自己写的主题估计今年年底都出不来,没什么创意…)

回归主题。很多博主喜欢在首页弄读者墙,或者在文章底部放置一排,作用相同,都是为了吸引访客多多留言,好让自己的名字上榜。效果如下:

WordPress读者墙

WordPress读者墙

因为图片很小,很难看清别人头像显示的是什么。如果有个鼠标移动图片上面,图片放大,是不是很炫?看看我写的DEMO吧。jQuery能很容易的写出这个效果。

HTML和CSS代码我就不解释了,只把jQuery代码做个解释。

$(function(){
	$(".head img").hover(function(){
		$(this).stop(true)//防止鼠标移动过快导致多图放大
		.parents("li").addClass("zin").end()//找到img的祖先元素,加上"zin"这个类
		.animate({left:-20,top:-20,width:80,height:80},200);//执行图片放大动作,200是图片放大速度
	},function(){
		$(this).stop(true)
		.parents("li").removeClass("zin")
		.end().animate({left:0,top:0,width:40,height:40},200);
	});
});

这段代码肯定你拿回去要修改的,直接复制肯定是不行的,所以有什么问题留言吧,我尽量帮你解决。

animate这个动作是我最先写出来的,因为很简单。而.stop(true)是为了鼠标快速移动图片后,图片连续放大,加了这个后,你把鼠标在头像上面快速的晃动,头像都不会变大的,只有鼠标停住最后一张图片才会放大。而最关键的是中间的加z-index属性,因为图片放大,会被旁边的图片遮住,所以肯定要调整z-index的数值,让当前的图片显示在最上面。我之前一直都往img上面加z-index,后来CSS群里的朋友说应该是往li上加,还帮加了这样一段代码,真是太感谢了!

提醒一句,最外面的div(我这里是head)不能加overflow:hidden,不然图片放大都被外面的层遮住了,所以我定义了.head{height:110px;}固定高度。反正这个div一般都是固定内容,所以固定高度是没有问题的。

接下来是抛砖引玉啦,其实这个效果只是我一个大效果里面的一部分而已。我遇到了一个困难,head里面必须加overflow:hidden,而我又想图片放大,有解决的方法么?

最后想说的是,图片放大效果很多地方都可以使用,不一定只有WordPress里面的读者墙,而且jQuery让他放大的动作更加优雅,所以我很是喜欢!希望大家可以借鉴到博客或者其他类型网站上面。

PS:20101010更新头像不清晰问题,原因我是放置的图片是35px的,而放大图片是80px,现在已经把图片大小修正为80px,很清晰的效果了。

评论列表

  1. ➡ 杯具了,看不懂。。

  2. 效果还不错~ 😎

  3. 我对jQuery的了解主要靠官方插件库
    不过jQuery缩放好像很流行的

    日啊,为什么发不出来??
    再发不出来我要哭了 😥

  4. 呵呵..放大了的图片很模糊..呵呵

  5. 以前我也给读者墙加了这样的效果,不过到最后又去掉了,为了速度把没用的效果都去掉了,呵呵!

  6. ➡ 俺什么基础都没有,看来要找找书看了,

  7. 直奔demo而去,很不错呀这个

  8. 效果很好,我折腾不了

  9. 😉 拿走… 😳

  10. 最近很忙,很长时间没过来了,这个必须缓存大图片才好用

  11. 效果很好。想加。可是我连读者墙都没有。死活弄不上读者墙。不知道怎么回事。我用的是wp-reader-wall插件。 😕

  12. 你怎么没放读者墙啊,没法体验啦。

  13. 谢谢博主分享,正找这个呢

  14. demo进不去,什么垃圾铁通啊 我的神

  15. google浏览器看下没有效果呀?换了火狐,出现了,不过图像变大就模糊了呀。
    ps:能不能把验证码放在submit上面呀,每次输完验证码,就点击“西门的后花园”去了。。 😕

    • chrome不可能没有效果,这是我的首选浏览器。图片模糊因为像素太小,只是个例子而已。你如果要做的话,肯定是拿放大后的像素图片啦!
      验证码已经取消了。 😯

  16. 耶~~~我的头像没你截了 😀 ~~~

  17. 我是放在侧栏的,这玩意有必要呢。

    不过我那的效果没这么炫

  18. 这个很重要,学习

  19. 看到求索阁被博主点名~难得的殊荣啊~ :mrgreen: 😈

  20. 感觉简单的放大会让图片变得不清晰。

  21. 揣摩一下,看看能不能弄到自己的博客上面,咦,那个截图有我的头像,估计在木木那截的。

  22. 哈哈,我在墙里面!

  23. zhuang

    哥们这样的效果有没详细的教程给我一份

  24. 嗯,这样如果用缓存版的话下载的头像必须够大,不然就模糊了…

  25. 囧,效果是很炫,就是作为不动代码什么的压力很大,根本不知道怎么弄。

  26. ❓ 😛 🙁 👿

  27. 没有使用方法啊。。我们这些新手只能看看了 ➡

  28. 牛顿

    放大效果有效 不知道怎么伪类没效果 图片一放大就把 别的图片推开了

  29. 牛顿

    呵呵 效果出来了 发现个兼容问题 在双核浏览器的IE模式 鼠标经过后 有短暂的位移 然后又正常

  30. 西门兄弟,有没有办法实现:排行版不显示无gravatar头像的人?phoetry兄弟写了一个判断是否有头像,如何可以让排行版过滤掉无头像的人?万分感谢。

  31. 想弄一个照片墙~ ➡

  32. 不会呐…弄得一塌糊涂,严重错位..

  33. 哈哈,是我想要的,不过感觉西门上图的墙比我家的墙要靓啊,求墙操作方法。

  34. 博主牛人,拿走了!

  35. 很不错的哟。。

发表评论

分类目录