Home > Database > Mysql Tutorial > JQuery controls the gradual enlargement of the picture from the center point

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

黄舟
Release: 2017-03-01 14:44:07
Original
1640 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 //m.sbmmt.com/

$(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 (m.sbmmt.com)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template