jQuery实现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一般都是固定内容,所以固定高度是没有问题的
完全实例代码:
<!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 > < div class = "head" > < ul > < li > < a href = "#" > < img src = "/f54f7e8880a77d9be41f85c973d4b7d0?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/fc3a22c058a3522f537fc14b7d5efbd2?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/2a72dea50051d8d74174edfeb3a1bc48?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/1ab32ab973c831bcee66ea906131e9f9?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/d45ac8a503b026458ee3b7678591acc6?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/3466e178f178d151c1cd8ad59b489e2b?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/0aafdfc08a51e5b518a43136a8aebf01?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/d5aa9bea3ff3966be2739aa7e1861471?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/07af1897f14014c388ec1a3a211e4663?s=80&d=&r=G" /> </ a > </ li > < li > < a href = "#" > < img src = "/465d00391a0bd1c066aac037df4bf5d1?s=80&d=&r=G" /> </ a > </ li > </ ul > </ div > </ body > </ html >查看更多关于jQuery实现WordPress读者墙、排行榜图片放大效果的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did8668