如何实现鼠标悬停图片中心点逐渐放大的长尾动画效果？

本文共计468个文字，预计阅读时间需要2分钟。

JS鼠标悬停图片由中心点逐渐放大效果原理及实现

实现鼠标悬停图片由中心点逐渐放大的效果原理非常简单，主要是通过jQuery的动画方法来调整图片的宽度和高度。当鼠标悬停在图片上时，图片的宽度和高度会逐渐增加，从而产生放大的效果。具体实现如下：

当鼠标经过图片时，通过jQuery的animate方法逐渐改变图片的宽度和高度。图片的初始宽度和高度可以通过CSS设置，当鼠标悬停时，通过animate方法将宽度和高度逐渐调整到更大的值。同时，为了使效果更加平滑，可以设置动画的持续时间。

以下是实现该效果的代码示例：

鼠标悬停图片放大效果 .image-container { width: 200px; height: 200px; overflow: hidden; position: relative; } .image-container img { width: 100%; height: 100%; transition: transform 0.5s ease; } .image-container:hover img { transform: scale(1.5); }

在这个示例中，当鼠标悬停在图片上时，图片的宽度和高度会逐渐增加到300px，当鼠标移开后，宽度和高度会恢复到200px。这样就可以实现一个简单的鼠标悬停图片放大效果。

JS鼠标悬停经过图片由中心点逐渐放大效果.md

> JS鼠标悬停经过图片由中心点逐渐放大效果 原理很简单，就是调用jq的动画方法，鼠标经过时候，图片宽高放大，然后左右位置向外扩展。 ``` //鼠标经过中心缩放图片效果 $.checkImgLoadCompete = function(img, callback) { var timer = setInterval(function() { if (img.complete) { clearInterval(timer); callback.call(img); } }, 50); }; $.fn.hoverZoomPic = function(){ $(this).each(function(){ $.checkImgLoadCompete(this, function(){ //console.log($(this).width(), $(this).height()); $(this).data('origin-width', $(this).width()).data('origin-height', $(this).height()); $(this).hover(function(){ var w = parseInt( $(this).data('origin-width') ), h = parseInt( $(this).data('origin-height') ); var w2 = w + w * 0.02, h2 = h + h * 0.02; var space = w * 0.02 / 2; $(this).stop().animate({height: h2, width: w2, left: -space, right: space}, 500); },function(){ var w = parseInt( $(this).data('origin-width') ), h = parseInt( $(this).data('origin-height') ); $(this).stop().animate({height: h, width: w, left:'0', right:'0'}, 400); }); }); }); }; ``` 参考资料[：www.lanrenzhijia.com/jquery/2884.html](www.lanrenzhijia.com/jquery/2884.html)