JQuery는 중심점에서 그림의 점진적인 확대를 제어합니다.

때때로 사진 위에 마우스를 놓으면 사진이 점차 커지는, 즉 사진의 너비와 높이가 점차 커지는 사진을 만들어야 하는데 이때는 왼쪽 값과 위쪽 값은 변경되지 않았으므로 중심점에서 크기가 조정되지 않는 것 같습니다를 참조하세요. 아래와 같습니다.

중심점에서 확대

구현 코드는 다음과 같습니다. 🎜>

아아앙

/********************************2016년 6월 26일 보충******************** *** *********************************************** *****/

2016년 6월 26 보충

오늘 위의 애니메이션에 실제로 작은 문제가 있다는 것을 발견했습니다. 즉, 해당 요소를 여러 번 이동하면 mouseenter와 mouseleave가 여러 번 실행될 것입니다. 물론 이것이 무슨 문제인지 생각하는 사람들도 있을 것입니다. 그럼 아래 그림을 보세요

즉, 마우스가 밖으로 나가도 mouseenter와 mouseleave가 계속해서 반복적으로 실행됩니다. 왜 이런 일이 발생합니까? JS 이벤트 큐에는 실행을 기다리는 애니메이션이 여러 개 있기 때문에 나중에 이벤트 큐를 정리할 필요가 있을 것 같습니다.

수정 계획

Jquery는 아래와 같이 지정된 요소에서 실행 중인 모든 애니메이션을 중지하는 중지 메소드를 제공합니다

수정된 효과는 아래와 같습니다

최종 JS 코드는 다음과 같습니다

<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>

2017년 2월 28일 추가

해결 : 빨리 퇴사하고 입주하고 묵으면 사진 무한으로 확대 가능

최종 코드는 다음과 같으며, 효과 사진은 http://에서 확인하실 수 있습니다. www.php.cn/

<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>

위는 중심점부터 이미지의 점진적인 확대 효과를 제어하는 ​​JQuery의 내용입니다. 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!