JS实现图片放大缩小的方法

实现图片放大缩小的方法主要可以通过JS来实现。下面是JS实现图片放大缩小的方法的完整攻略：

一、为需要放大缩小的图片添加标签属性

首先在需要进行放大缩小的图片中添加data-zoom属性。例如：

<img src="https://example.com/example.jpg" data-zoom="https://example.com/example_zoom.jpg">

其中，data-zoom属性指向的是当前图片的高清大图。

二、通过JS获取需要进行放大缩小的图片

我们可以通过document.getElementsByTagName方法获取我们需要放大缩小的图片。

var imgs = document.getElementsByTagName('img');

for (let i = 0; i < imgs.length; i++) {
  // 对每张需要放大缩小的图片进行处理
}

三、绑定鼠标移入、移出事件

我们可以通过添加事件监听器，绑定鼠标移入、移出事件来实现鼠标悬浮放大图片的功能。

for (let i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener('mouseover', function() {
    // 鼠标移入，放大图片
  });
  imgs[i].addEventListener('mouseout', function() {
    // 鼠标移出，缩小图片
  });
}

在鼠标移入事件中，我们可以通过创建一个div元素，将当前图片放入其中，并给div设置宽高和absolute定位，用于放大效果。同时，我们还需要在div中添加一个img元素，用于显示高清大图。

var zoomDiv = document.createElement('div');
var zoomImg = document.createElement('img');
zoomDiv.style.width = '400px'; // 设置div的宽度
zoomDiv.style.height = '400px'; // 设置div的高度
zoomDiv.style.position = 'absolute'; // 设置绝对定位
zoomDiv.style.top = '-9999px'; // 隐藏元素
zoomDiv.appendChild(zoomImg); // 添加img元素到div中

// 绑定鼠标移入事件
imgs[i].addEventListener('mouseover', function() {
  zoomImg.src = this.getAttribute('data-zoom'); // 设置img的高清大图
  zoomDiv.style.top = this.offsetTop + this.offsetHeight + 'px'; // 设置div距离顶部的位置
  zoomDiv.style.left = this.offsetLeft + 'px'; // 设置div距离左侧的位置
  document.body.appendChild(zoomDiv); // 将div元素添加到body中
});

在鼠标移出事件中，则需要将div元素移除掉，以实现缩小的效果。

// 绑定鼠标移出事件
imgs[i].addEventListener('mouseout', function() {
  zoomDiv.style.top = '-9999px';
  zoomDiv.style.left = '-9999px';
});

四、示例说明

这里提供两个示例说明，第一个示例展示了如何使用JS实现图片悬浮放大缩小的效果：

HTML代码：

<img src="https://example.com/example.jpg" data-zoom="https://example.com/example_zoom.jpg">

JS代码：

var imgs = document.getElementsByTagName('img');

for (let i = 0; i < imgs.length; i++) {
  var zoomDiv = document.createElement('div');
  var zoomImg = document.createElement('img');
  zoomDiv.style.width = '400px';
  zoomDiv.style.height = '400px';
  zoomDiv.style.position = 'absolute';
  zoomDiv.style.top = '-9999px';
  zoomDiv.appendChild(zoomImg);

  imgs[i].addEventListener('mouseover', function() {
    zoomImg.src = this.getAttribute('data-zoom');
    zoomDiv.style.top = this.offsetTop + this.offsetHeight + 'px';
    zoomDiv.style.left = this.offsetLeft + 'px';
    document.body.appendChild(zoomDiv);
  });

  imgs[i].addEventListener('mouseout', function() {
    zoomDiv.style.top = '-9999px';
    zoomDiv.style.left = '-9999px';
  });
}

第二个示例则展示了如何使用jQuery库来实现图片悬浮放大缩小的效果：

HTML代码：

<img src="https://example.com/example.jpg" data-zoom="https://example.com/example_zoom.jpg">

JS代码：

$('img').hover(function() {
  var dataZoom = $(this).data('zoom');
  var offset = $(this).offset();
  var imgWidth = $(this).width();
  var imgHeight = $(this).height();
  $('body').append('<div id="zoomImgDiv"><img src="' + dataZoom + '"/></div>');
  $('#zoomImgDiv').css({ 'left': offset.left + imgWidth + 'px', 'top': offset.top + 'px' });
}, function() {
  $('#zoomImgDiv').remove();
});

以上就是JS实现图片放大缩小的方法的完整攻略，通过该方法我们可以轻松实现图片的悬浮放大缩小效果。