JQuery controls the gradual enlargement of the picture from the center point

黄舟

Release： 2017-03-01 14:44:07

Original

1575 people have browsed it

Sometimes we need to make a picture that when the mouse is placed on the picture, we hope that the picture will gradually become larger, that is, the width and height of the picture will gradually become larger, but at this time, its left value and top value have not changed, so see It doesn't seem to be scaling from the center point. As shown below:

Zoom from the center point

The implementation code is as follows:

<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(){
		$(&#39;#p1 img&#39;).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>

Copy after login

##/********************************June 26, 2016 Supplement****************** ****************************************************/

June 2016 26 Supplement

I discovered today that there is actually a small problem with the animation above. That is, when I move in and out the corresponding elements multiple times, mouseenter and mouseleave will be executed multiple times. Of course, some people will think, what is the problem with this? Then look at the picture below

That is, when my mouse is moved out, mouseenter and mouseleave are still executed repeatedly. Why is this so? Because there are multiple animations waiting to be executed in the JS event queue, I think it is necessary to summarize the event queue later.

Modification plan

Jquery provides the stop method to stop all animations running on the specified element, as shown below

The modified effect is shown below

The final JS code is as follows

<script type="text/javascript">
	$(function(){
		$(&#39;#p1 img&#39;).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>

Copy after login

##February 28, 2017 Supplement

Solution : If you move out quickly, move in and stay, the picture can be enlarged infinitely

The final code is as follows, and the effect picture can be found at http://www.php.cn/

$(function(){
	$(&#39;.focus_news&#39;).mouseenter(function(){
		var imgObj=$(this).find(&#39;img&#39;);	
		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(&#39;.com_news_title&#39;).css(&#39;color&#39;,&#39;#F59300&#39;);
	}).mouseleave(function(){
		$(this).find(&#39;.com_news_title&#39;).css(&#39;color&#39;,&#39;#52A2DE&#39;);
		$(this).find(&#39;img&#39;).stop().animate({width: "100%",
									 height: "100%",
									 left:"0px",
									 top:"0px"}, 500 );
	});
});

Copy after login

The above is the content of JQuery controlling the gradual enlargement effect of the image from the center point. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!