jQuery鼠标经过时放大图片

/*CSS*/

.box4{height:151px;}
.box4 ul{width:868px;height:106px;border:1px solid #ccc;}
.box4 li{float:left;width:103px;height:94px;margin:5px 0px 5px 5px;background:#f9f9f9;}

#present {}
#present li{position:relative;}
#present .big-img{display:none;position:absolute;left:-80px;top:-60px;z-index:1000;}
#present  .small-img{position:relative;}
#present  .small-img img{border:1px solid #ccc;}
#present .big-img img{padding:10px;background:url(../images/bb.png) repeat 0 0;}

.relative{position:relative;}
.relative a{position:absolute;top:5px;right:5px;}

 

 

/*JS*/

jQuery('#present .small-img').hover(function(){
   jQuery('#present .big-img').hide();
   jQuery(this).next().show();
     return false;
},function(){})

jQuery('#present .big-img').hover(
function(){
jQuery(this).show();
},function(){
 jQuery(this).hide();                 //移入与移出
})
jQuery('#present .relative a').click(function(){
  jQuery(this).parent().parent().hide();
  return false;
})    

 

 

 

/*HTML*/

<div class="box4">

<ul id="present">
<li>
<div class="small-img"><img src="images/small1.png" align="center"></div>
<div class="big-img">
<div class='relative'>
<img src="images/big1.jpg" width="234">
</div>
</div>
</li>
<li>
<div class="small-img"><img src="images/small2.png" align="center"></div>
<div class="big-img">
<div class='relative'>
<img src="images/big2.jpg" width="234">
</div>
</div>
</li>

</ul>

</div>

转载于:https://www.cnblogs.com/ballad1939/archive/2012/01/19/2327373.html