如何实现鼠标悬停图片从中心点逐渐放大的JS效果？

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

JS鼠标悬停图片由中心点逐渐放大效果实现方法

原理非常简单，就是利用jQuery的动画方法。当鼠标悬停在图片上时，图片从中心点开始逐渐放大，左右两侧位置向外扩展。具体实现如下：

javascript$(document).ready(function() { // 鼠标悬停事件 $('.hover-image').hover(function() { // 获取图片的中心点 var centerX=$(this).width() / 2; var centerY=$(this).height() / 2;

// 设置动画效果 $(this).animate({ width: $(this).width() * 2, height: $(this).height() * 2, left: -centerX, top: -centerY }, 500); }, function() { // 动画回退 $(this).animate({ width: $(this).width(), height: $(this).height(), left: 0, top: 0 }, 500); });});

在HTML中，你需要将图片的类名设置为`hover-image`：

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)