成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

有的時候我們需要做一個當鼠標放置在圖片上的時候，希望圖片逐漸變大，即圖片的width和height逐漸變大，但是此時，其left值與top值沒有改變，故看似不是從中心點進行縮放的。如下圖：

從中心點進行縮放

實現(xiàn)代碼如下：

<meta charset="utf-8"> 
<style type="text/css"> 
#div1{ width:600px; height:400px; margin:50px auto; position:relative; text-align: center; padding-left:50px;} 
#div1 img{ position:absolute; left:0; top:0; margin: 0 auto;} 
</style> 
<div id="div1"> 
<img src="http://www.gimoo.net/t/1901/images/1.jpg" width="100px" height="80px"> 
</div> 
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#div1 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>

以上所述是小編給大家介紹的JQuery控制圖片由中心點逐漸放大效果的相關(guān)知識，希望對大家有所幫助，如果大家想了解更多內(nèi)容敬請關(guān)注綠夏網(wǎng)網(wǎng)站！