jQuery鼠标悬停图片放大

1、新建html文档。

3、书写hmtl代码。<div id="aaaa"> <ul> <li><img src="lanren01.jpg" width="218" height="155" /><h2>成都康定理塘稻城亚丁然后说再见</h2></li> <li><img src="lanren02.jpg" width="218" height="155" /><h2>梅里梅里梅里</h2></li> <li><img src="lanren03.jpg" width="218" height="155" /><h2>北京汽车车模第三弹</h2></li> <li><img src="lanren04.jpg" width="218" height="155" /><h2>趁着工作之便，我也送几个车模出来养养眼</h2></li> </ul></div>

5、书写并添加js代码。<script src="jquery.min.js"></script><script>$烫喇霰嘴(function(){ var imgs = $('#aaaa li'); var imgWidth = 218; //图片的默认宽度，主意不要带单位 var imgHeight = 155; //图片的默认高度，主意不要带单位 imgs.hover(function(){ $(this).find('img').stop().animate({ left:'-20', top:'-20', right:'-20', bottom:'-10px', width:imgWidth+20+'px', height:imgHeight+20+'px' },500); },function(){ $(this).find('img').stop().animate({ left:'0', top:'0', right:'0', bottom:'0', width:imgWidth+'px', height:imgHeight+'px' },500); });});</script>

7、查看效果。