因为图片很小，很难看清别人头像显示的是什么。如果有个鼠标移动图片上面，图片放大，是不是很炫？看看我写的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一般都是固定内容，所以固定高度是没有问题的
完全实例代码
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现WordPress读者墙、排行榜图片放大效果</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> div,img,ul,li{margin:0; padding:0;} img{border:0; vertical-align:top;} ul,li{list-style:none;} .head{width:260px; height:110px; background:#eee; margin:30px 0 0 50px;} .head img{width:40px; height:40px; position:absolute;} .head li{float:left; display:inline; width:40px; height:40px; position:relative; margin:10px 0 0 10px;} .zin{z-index:999;} </style> <script type="text/javascript"> $(function(){ $(".head img").hover(function(){ $(this).stop(true).parents("li").addClass("zin").end().animate({left:-20,top:-20,width:80,height:80},200); },function(){ $(this).stop(true).parents("li").removeClass("zin").end().animate({left:0,top:0,width:40,height:40},200); }); }); </script> </head> <body> |
|