1、新建html文档。
2、准备好需要用到的图标。
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>
4、书写css代码。<style>*{ margin:0; padding:0; list-style:none;}img{ border:0;}body{ background:#000;}#aaaa{ width:460px; height:auto; margin:150px auto; overflow:hidden;}#aaaa li{ width:218px; height:155px; overflow:hidden; position:relative; float:left; margin:0 12px 12px 0;}#aaaa li img{ position:absolute; left:0; top:0; z-index:1; cursor:pointer;}#aaaa li h2{ font-size:14px; width:198px; font-weight:normal; text-align:left; display:block; position:absolute; left:0; bottom:0; height:30px; line-height:30px; padding:0 10px; background:url(/dot.png) repeat; display:block; z-index:2; color:#444;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;}</style>
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>
6、代码整体结构。
7、查看效果。
