JQuery控制圖片由中心點(diǎn)逐漸放大效果

<meta charset="utf-8">
<style type="text/css">
#p1{ width:600px; height:400px; margin:50px auto; position:relative; text-align: center; padding-left:50px;}
#p1 img{ position:absolute; left:0; top:0; margin: 0 auto;}
</style>
<p id="p1">
	<img src="images/1.jpg" width="100px" height="80px">
</p>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	$(function(){
	$('#p1 img').mouseenter(function(){
	var wValue=1.5 * $(this).width();
	var hValue=1.5 * $(this).height();	
	$(this).animate({width: wValue,
	height: hValue,
	left:("-"+(0.5 * $(this).width())/2),
	top:("-"+(0.5 * $(this).height())/2)}, 1000);
	}).mouseleave(function(){
	$(this).animate({width: "100",
	 height: "80",
	 left:"0px",
	 top:"0px"}, 1000 );
	});
	});
</script>

<script type="text/javascript">
	$(function(){
	$('#p1 img').mouseenter(function(){
	var wValue=1.5 * $(this).width();
	var hValue=1.5 * $(this).height();	
	$(this).stop().animate({width: wValue,
	height: hValue,
	left:("-"+(0.5 * $(this).width())/2),
	top:("-"+(0.5 * $(this).height())/2)}, 1000);
	}).mouseleave(function(){
	$(this).stop().animate({width: "100",
	 height: "80",
	 left:"0px",
	 top:"0px"}, 1000 );
	});
	});
</script>

$(function(){
	$('.focus_news').mouseenter(function(){
	var imgObj=$(this).find('img');	
	imgObj.stop().css({width: "100%",height: "100%",left:"0px",top:"0px"});	
	var wValue=1.5 * imgObj.width();
	var hValue=1.5 * imgObj.height();
	imgObj.animate({
	width: wValue,
	height: hValue,
	left:("-"+(0.5 * imgObj.width())/2),
	top:("-"+(0.5 * imgObj.height())/2)}, 500);
	$(this).find('.com_news_title').css('color','#F59300');
	}).mouseleave(function(){
	$(this).find('.com_news_title').css('color','#52A2DE');
	$(this).find('img').stop().animate({width: "100%",
	 height: "100%",
	 left:"0px",
	 top:"0px"}, 500 );
	});
});