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

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-09 09:10:04

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

JQuery控制圖片由中心點(diǎn)逐漸放大效果:有的時(shí)候我們需要做一個(gè)當(dāng)鼠標(biāo)放置在圖片上的時(shí)候，希望圖片逐漸變大，即圖片的width和height逐漸變大，但是此時(shí)，其left值與top值沒(méi)有改變，故看似不是從中心點(diǎn)進(jìn)行縮放的。如下圖：從中心點(diǎn)進(jìn)行縮放實(shí)現(xiàn)代碼如下：<meta charset="ut

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JQuery控制圖片由中心點(diǎn)逐漸放大效果:有的時(shí)候我們需要做一個(gè)當(dāng)鼠標(biāo)放置在圖片上的時(shí)候，希望圖片逐漸變大，即圖片的width和height逐漸變大，但是此時(shí)，其left值與top值沒(méi)有改變，故看似不是從中心點(diǎn)進(jìn)行縮放的。如下圖：從中心點(diǎn)進(jìn)行縮放實(shí)現(xiàn)代碼如下：<meta charset="ut

有的時(shí)候我們需要做一個(gè)當(dāng)鼠標(biāo)放置在圖片上的時(shí)候，希望圖片逐漸變大，即圖片的width和height逐漸變大，但是此時(shí)，其left值與top值沒(méi)有改變，故看似不是從中心點(diǎn)進(jìn)行縮放的。如下圖：

從中心點(diǎn)進(jìn)行縮放

實(shí)現(xià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>

/******************************2016年6月26 補(bǔ)充*******************************************************************/

2016年6月26 補(bǔ)充

今天發(fā)現(xiàn)，上面的動(dòng)畫，其實(shí)還是有一個(gè)小問(wèn)題的。就是當(dāng)我多次在相應(yīng)的元素上移入和移除的時(shí)候，就會(huì)執(zhí)行多次mouseenter、mouseleave，當(dāng)然有人會(huì)想，這樣會(huì)有什么問(wèn)題呢？那么就看下圖

也就是當(dāng)我的鼠標(biāo)移出來(lái)了，還在反復(fù)執(zhí)行mouseenter、mouseleave。為什么會(huì)這樣呢？因?yàn)镴S事件隊(duì)列中有多個(gè)等待執(zhí)行的動(dòng)畫，關(guān)于事件隊(duì)列，我覺(jué)得回頭有必要好好總結(jié)一下。

修改方案

Jquery提供了stop方法，停止所有在指定元素上正在運(yùn)行的動(dòng)畫，如下圖

修改后效果下圖

最終JS部分代碼如下

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

2017年02月28 補(bǔ)充

解決：如果快速移出，移入停留，圖片可以無(wú)限放大

最終代碼如下，效果圖見 http://www.gxlcms.com/

$(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 );
	});
});

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com