jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

介绍

接着将内容扩充至简短的介绍，介绍文章的主要内容和意义：

在网页设计中，图片放大缩小是常见的操作，而鼠标滚动又是一种常见的交互方式。这篇文章将会介绍使用jQuery实现滚动鼠标放大缩小图片的方法，读者将能够在您的网站中使用此方法，提升用户的交互体验。

使用二级标题：

介绍

代码示例1

现在我们需要展示如何实现这一功能，首先需要通过代码示例演示：

[HTML]

<div class="zoom-container">
  <img src="images/example.jpg" alt="example">
</div>

[CSS]

.zoom-container {
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.zoom-container img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

[JavaScript]

$(function(){
  $("body").on("mousewheel", ".zoom-container", function (e) {
    e.preventDefault();
    var del = 0;
    if (e.originalEvent.wheelDelta) del = e.originalEvent.wheelDelta;
    else if (e.originalEvent.detail) del = e.originalEvent.detail * -1;
    if (del > 0) {
      // 放大
      $(".zoom-container img").animate({
        width: "+=20%",
        height: "+=20%",
        left: "-=10%",
        top: "-=10%"
      }, 100);
    } else if (del < 0) {
      // 缩小
      $(".zoom-container img").animate({
        width: "-=20%",
        height: "-=20%",
        left: "+=10%",
        top: "+=10%"
      }, 100);
    }
  });
});

使用三级标题：

代码示例1

在HTML中插入zoom-container容器，并在该容器中插入img标签来显示需要操作的图片。在CSS中设置容器和标签的样式，如设置容器的宽、高及overflow:hidden样式。接着在JavaScript中对img标签添加mousewheel事件的监听器，通过判断鼠标滚轮向上或向下滚动的方向，来决定图片应该放大还是缩小。放大和缩小都是通过animate()方法来实现的。

代码示例2

为了更好的展示效果，我们还需要增加一些其他操作，如将图片放到页面的中央：

[HTML]

<div class="zoom-container2">
  <img src="images/example.jpg" alt="example">
</div>

[CSS]

.zoom-container2 {
  width: 600px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.zoom-container2 img {
  width: 200%;
  height: 200%;
  position: absolute;
  left: -50%;
  top: -50%;
}

[JavaScript]

$(function(){
  var img = $(".zoom-container2 img");
  var container = $(".zoom-container2");
  var imgWidth = img.width();
  var imgHeight = img.height();

  container.scrollTop((imgHeight-container.height())/2);
  container.scrollLeft((imgWidth-container.width())/2);

  $("body").on("mousewheel", ".zoom-container2", function (e) {
    e.preventDefault();
    var del = 0;
    if (e.originalEvent.wheelDelta) del = e.originalEvent.wheelDelta;
    else if (e.originalEvent.detail) del = e.originalEvent.detail * -1;
    if (del > 0) {
      // 放大
      img.animate({
        width: "+=20%",
        height: "+=20%",
        left: "-=10%",
        top: "-=10%"
      }, 100);
    } else if (del < 0) {
      // 缩小
      img.animate({
        width: "-=20%",
        height: "-=20%",
        left: "+=10%",
        top: "+=10%"
      }, 100);
    }
  });
});

使用三级标题：

代码示例2

首先调整zoom-container2容器的布局方式，将容器样式position属性设置为relative，将img样式position属性设置为absolute，并将容器样式overflow属性设置为hidden，这可以让图片超出容器范围的部分被隐藏掉。接着在JavaScript中设定图片居中的方式，对zoom-container2容器进行scrollTop和scrollLeft的设置，来使图片居中。鼠标滚动的放大缩小的操作和第一个示例相似。