css代码:
<style type="text/css">
.enlarge_div{
width:640px; margin:100px auto;
}
.enlarge_ul{
list-style-type:none;
float:left;
}
.enlarge_ul li a{
display:block;
position:relative;
height:150px;
}
.enlarge_ul li img{
position:absolute;
left:0;
top:0;
height:140px;
width:140px;
border:solid 2px #DDDDDD
}
.enlarge_ul li img.on{
border:solid 4px #DDDDDD
}
</style>
jQuery代码:
<script type="text/javascript"> $(document).ready(function(){ $(".enlarge_ul > li > a").each(function(){ $(this).find('img').hover( function(){ $(this).animate({ width:"280px", height:"280px", top:"-70px", left:"-70px" }, 200).addClass('on'); }, function(){ $(this).animate({ width:"140px", height:"140px", top:"0", left:"0" }, 200).removeClass('on'); } ); $(this).hover( function(){ $(this).css("z-index", 1); }, function(){ $(this).css("z-index", 0); }); }); }); </script>
html代码:
<div class="enlarge_div">
<ul class="enlarge_ul">
<li class="enlarge_li">
<a href="#">
<img src="/images/小鸟1.jpg"/>
</a>
</li>
<li class="enlarge_li">
<a href="#">
<img src="/images/小鸟2.jpg"/>
</a>
</li>
<li class="enlarge_li">
<a href="#">
<img src="/images/小鸟3.jpg"/>
</a>
</li>
<li class="enlarge_li">
<a href="#">
<img src="/images/小鸟4.jpg"/>
</a>
</li>
</ul>
</div>