开始先打个岔。作为一名敲代码的人员,我已经两个多月没有折腾博客了,可以翻翻我“折腾博客”目录下面的文章。而一位名叫求索阁的朋友,前天和今天都在我的留言板里留言我说没折腾博客,原来我的懒惰影响到大家的不满啦…赶紧发个准备放到自己写的主题里面的小效果出来,不然再被人骂就很丢人了!(自己写的主题估计今年年底都出不来,没什么创意…)
回归主题。很多博主喜欢在首页弄读者墙,或者在文章底部放置一排,作用相同,都是为了吸引访客多多留言,好让自己的名字上榜。效果如下:
因为图片很小,很难看清别人头像显示的是什么。如果有个鼠标移动图片上面,图片放大,是不是很炫?看看我写的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,很清晰的效果了。
沙发沙发
➡ 杯具了,看不懂。。
这个jQuery算是很简单的吧…看不懂我也没办法了,当作飘过算了。
效果还不错~ 😎
你博客越来越牛叉啦,我是越来越懒啦。 👿
我对jQuery的了解主要靠官方插件库
不过jQuery缩放好像很流行的
日啊,为什么发不出来??
再发不出来我要哭了 😥
不会吧,只要发表过一次后,记下来你的信息,是不需要什么验证码的呀!
呃,这可能跟我挂代理有关
没办法,小区宽带一到晚上就不是人上的
为什么每次都要输验证码~ 😕 😕
验证码已经取消了,我也不想啊… ❓
你有三次留言被视为垃圾评论,不知道为什么。
呵呵..放大了的图片很模糊..呵呵
那个可以自己去调整图片的大小,我只是拿评论的头像做个例子而已。
以前我也给读者墙加了这样的效果,不过到最后又去掉了,为了速度把没用的效果都去掉了,呵呵!
我怎么没发现,害我写半天…
➡ 俺什么基础都没有,看来要找找书看了,
推荐《锋利的jQuery》
直奔demo而去,很不错呀这个
帮我看看我最后提的问题嘛 ❓
效果很好,我折腾不了
呵呵,玩玩而已,不一定非要用上嘛 ❗
🙄 要是能把那些wp达人的教程全集合到一个主题里,
臃肿!适合自己的才是最好的。
域名牛叉
文章犀利
jquery很赞
😉 拿走… 😳
不用谢哈! 😯
最近很忙,很长时间没过来了,这个必须缓存大图片才好用
如果都用放大的图片尺寸,就不会有这个问题了。
效果很好。想加。可是我连读者墙都没有。死活弄不上读者墙。不知道怎么回事。我用的是wp-reader-wall插件。 😕
插件不行去搜索代码方式的吧,插件多了也不好
你怎么没放读者墙啊,没法体验啦。
暂时不想放,你可以看demo嘛,效果一样的。
谢谢博主分享,正找这个呢
不谢,有空常来玩。 ❗
demo进不去,什么垃圾铁通啊 我的神
google浏览器看下没有效果呀?换了火狐,出现了,不过图像变大就模糊了呀。
ps:能不能把验证码放在submit上面呀,每次输完验证码,就点击“西门的后花园”去了。。 😕
chrome不可能没有效果,这是我的首选浏览器。图片模糊因为像素太小,只是个例子而已。你如果要做的话,肯定是拿放大后的像素图片啦!
验证码已经取消了。 😯
耶~~~我的头像没你截了 😀 ~~~
但是就按照上篇文章评论一顺找的图片而已 😉
我是放在侧栏的,这玩意有必要呢。
不过我那的效果没这么炫
单纯的放大还是不成熟,我有好想法可是实现不了,一直求助在 😥
这个很重要,学习
活到老,学到老 ❗
看到求索阁被博主点名~难得的殊荣啊~ 😈
我点名了么?我怎么不知道? 😮
你在该文中提到了传说中的久违的求索阁啊~呵呵
❓ 那是被你在留言板里给逼的…居然连续留言两次…
感觉简单的放大会让图片变得不清晰。
这个问题是我的失误,我把图片像素弄小了,现在图片像素和放大图片一样大,完全不模糊了。高清无码哟! 😈
果然清晰了。不过话说,你给我的回复,进了垃圾桶 = =。
这个我就不知道邮箱是怎么判断的了 😕
揣摩一下,看看能不能弄到自己的博客上面,咦,那个截图有我的头像,估计在木木那截的。
实验成功的说
是上一篇文章留言从上到下拿的图片 😆
哈哈,我在墙里面!
是把上一篇的留言按照从上到下的顺序拿的图片
哥们这样的效果有没详细的教程给我一份
嗯,这样如果用缓存版的话下载的头像必须够大,不然就模糊了…
头像那个函数有个参数是设置图片大小的,弄最大时候的大小就差不多了。
囧,效果是很炫,就是作为不动代码什么的压力很大,根本不知道怎么弄。
❓ 😛 🙁 👿
🙂 😳 😯
好技巧
没有使用方法啊。。我们这些新手只能看看了 ➡
放大效果有效 不知道怎么伪类没效果 图片一放大就把 别的图片推开了
图片要设置绝对定位,看我的demo里CSS
呵呵 效果出来了 发现个兼容问题 在双核浏览器的IE模式 鼠标经过后 有短暂的位移 然后又正常
搜狗、360、遨游,测试我的demo,貌似都没问题
晕 难道我电脑问题 一会去网吧44。。。。
西门兄弟,有没有办法实现:排行版不显示无gravatar头像的人?phoetry兄弟写了一个判断是否有头像,如何可以让排行版过滤掉无头像的人?万分感谢。
那个要PHP判断,我不会……
还是要谢谢你。
想弄一个照片墙~ ➡
不会呐…弄得一塌糊涂,严重错位..
哈哈,这东西慢慢弄就会了。 😈
哈哈,是我想要的,不过感觉西门上图的墙比我家的墙要靓啊,求墙操作方法。
博主牛人,拿走了!
很不错的哟。。