jquery如何实现将鼠标悬停在图像上平滑放大效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.hover{ background:#666666;}
.picShow{margin:0px auto;width:700px; height:200px;margin-top:100px; position:relative;}
.picShow ul li img{width:159px; height:195px;-ms-interpolation-mode: bicubic;}
ul{margin:0; padding:0;}
ul li{ list-style:none; margin:0; padding:0; float:left; position:relative;}
</style>
<script src="http://www.dopic.net/../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(function(){
$("ul li").hover(function(){
$(this).css({'z-index' : '10'});
$(this).find("img").addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '20%',
left: '60%',
width: "259px",
height: '295px',
padding: '20px' ,
position:'absolute'
},200);
},function(){
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '159px',
height: '195px',
padding: '0px'
}, 400);
});
});
</script>
</head>
<body>
<div class="picShow">
<ul>
<li><img src="http://www.dopic.net/1.jpg" /></li>
<li><img src="http://www.dopic.net/2.jpg" /></li>
<li><img src="http://www.dopic.net/3.jpg" /></li>
<li><img src="http:/www.dopic.net/4.jpg" /></li>
</ul>
</div>
</body>
</html>
版权信息
（本文地址：https://www.nzw6.com/?p=5251）
