1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。
<div id="aaaa">
<ul>
<li><img src="lanren01.jpg
<li><img src="lanren02.jpg
<li><img src="lanren03.jpg
<li><img src="lanren04.jpg
</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、查看效果。
