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

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

从中心点进行缩放

实现代码如下：

#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;}

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

});

});

以上所述是小编给大家介绍的JQuery控制图片由中心点逐渐放大效果的相关知识，希望对大家有所帮助，如果大家想了解更多内容敬请关注我们网站！

时间： 2016-06-24