jQuery實現(xiàn)WordPress讀者墻、排行榜圖片放大效果

2024-09-07 00:50:02

字體：大中小

供稿：網(wǎng)友

因為圖片很小,很難看清別人頭像顯示的是什么,如果有個鼠標移動圖片上面,圖片放大,是不是很炫？看看我寫的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);//執(zhí)行圖片放大動作，200是圖片放大速度

},function(){

  $(this).stop(true)

  .parents("li").removeClass("zin")

  .end().animate({left:0,top:0,width:40,height:40},200);

});

});

animate這個動作是我最先寫出來的,因為很簡單,而.stop(true)是為了鼠標快速移動圖片后,圖片連續(xù)放大,加了這個后,你把鼠標在頭像上面快速的晃動,頭像都不會變大的,只有鼠標停住最后一張圖片才會放大,而最關(guān)鍵的是中間的加z-index屬性,因為圖片放大,會被旁邊的圖片遮住,所以肯定要調(diào)整z-index的數(shù)值,讓當前的圖片顯示在最上面,我之前一直都往img上面加z-index,后來CSS群里的朋友說應(yīng)該是往li上加,還幫加了這樣一段代碼,真是太感謝了！

提醒一句,最外面的div(我這里是head)不能加overflow:hidden,不然圖片放大都被外面的層遮住了,所以我定義了.head{height:110px;}固定高度,反正這個div一般都是固定內(nèi)容,所以固定高度是沒有問題的

完全實例代碼:

<!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實現(xiàn)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>