悬停时缩放图像 - Javascript

本文介绍如何使用Javascript使鼠标悬停时实现图像缩放效果。

实现思路

实现鼠标悬停时缩放图像效果的核心思路是，当鼠标移动到图像上时，实时改变图像的宽高比例，从而实现图像的缩放。具体实现过程如下：

1. 获取需要缩放的图像元素。
2. 监听鼠标移动事件，并根据鼠标在图像中的坐标计算出当前的宽高比例。
3. 利用CSS的transform属性，实时改变图像的大小。

代码实现

以下是基于jQuery实现的鼠标悬停时缩放图像效果的代码示例：

$(function() {
  // 获取图像元素
  var img = $("img");

  img.mousemove(function(e) {
    // 计算宽高比例
    var width = e.pageX - this.offsetLeft;
    var height = e.pageY - this.offsetTop;
    var wRatio = width / this.offsetWidth;
    var hRatio = height / this.offsetHeight;

    // 根据宽高比例缩放图像
    $(this).css({
      "transform": "scale(" + wRatio.toFixed(1) + ", " + hRatio.toFixed(1) + ")"
    });
  });

  img.mouseleave(function() {
    // 恢复原始大小
    $(this).css({
      "transform": "scale(1, 1)"
    });
  });
});

总结

使用以上代码可以在网页中实现鼠标悬停时缩放图像的效果。需要注意的是，由于本方法使用了CSS的transform属性，因此在使用时需要确保浏览器支持该属性。