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

时间：2013-06-15 编辑：简简单单来源：一聚教程网

因为图片很小，很难看清别人头像显示的是什么。如果有个鼠标移动图片上面，图片放大，是不是很炫？看看我写的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{}固定高度。反正这个div一般都是固定内容，所以固定高度是没有问题的

完全实例代码

代码如下

复制代码

jQuery实现<a href="/list-203/" target="_blank">WordPress</a>读者墙、排行榜图片放大效果