JQuery控制图片由中心点逐渐放大效果

前端技术 2023/09/08 JavaScript

有的时候我们需要做一个当鼠标放置在图片上的时候，希望图片逐渐变大，即图片的width和height逐渐变大，但是此时，其left值与top值没有改变，故看似不是从中心点进行缩放的。如下图：


从中心点进行缩放

实现代码如下：

<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=\"images/1.jpg\" width=\"100px\" height=\"80px\"> 
</div> 
<script type=\"text/javascript\" src=\"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控制图片由中心点逐渐放大效果的相关知识，希望对大家有所帮助，如果大家想了解更多内容敬请关注phpstudy网站！

本文地址：https://www.stayed.cn/item/21678

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案