javascript实现电商放大镜效果

实现电商放大镜效果需要以下几个步骤：

1. 布局：在HTML中，创建需要实现放大镜效果的区域，并将放大后的图片显示出来。例如：

<div class="thumbnail">
  <img src="thumb.jpg" alt="Thumbnail">
  <div class="zoom"></div>
</div>
<div class="large">
  <img src="large.jpg" alt="Large">
</div>

1. 样式：使用CSS设置缩略图和放大镜的样式。例如：

.thumbnail {
  position: relative;
  width: 400px;
  height: 300px;
}
.thumbnail img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.zoom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 0, 0.4);
  cursor: zoom-in;
  display: none;
}
.large {
  position: absolute;
  top: 0;
  left: 400px;
  width: 800px;
  height: 600px;
  overflow: hidden;
}
.large img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

1. JS实现：使用JavaScript监听鼠标移动事件，计算出放大区域的位置和大小，获取放大后的图片，将其设置为放大区域背景图片或者通过canvas等技术在放大区域中画出对应部分。例如：

var thumbnail = document.querySelector('.thumbnail');
var zoom = document.querySelector('.zoom');
var large = document.querySelector('.large');
var largeImg = large.querySelector('img');

thumbnail.addEventListener('mousemove', function(e) {
  // 获取鼠标相对缩略图的位置
  var x = e.pageX - thumbnail.offsetLeft;
  var y = e.pageY - thumbnail.offsetTop;

  // 计算放大区域的位置和大小
  var left = x - zoom.offsetWidth / 2;
  var top = y - zoom.offsetHeight / 2;
  var zoomWidth = thumbnail.offsetWidth / largeImg.offsetWidth * large.offsetWidth;
  var zoomHeight = thumbnail.offsetHeight / largeImg.offsetHeight * large.offsetHeight;

  // 设置放大区域的位置和大小
  zoom.style.left = left + 'px';
  zoom.style.top = top + 'px';
  zoom.style.width = zoomWidth + 'px';
  zoom.style.height = zoomHeight + 'px';

  // 获取放大后的图片
  var dx = -left / thumbnail.offsetWidth * largeImg.offsetWidth;
  var dy = -top / thumbnail.offsetHeight * largeImg.offsetHeight;
  largeImg.style.left = dx + 'px';
  largeImg.style.top = dy + 'px';
});

thumbnail.addEventListener('mouseenter', function(e) {
  zoom.style.display = 'block';
  large.style.display = 'block';
});

thumbnail.addEventListener('mouseleave', function(e) {
  zoom.style.display = 'none';
  large.style.display = 'none';
});

这样，当鼠标移动到缩略图上时，会出现一个放大镜效果，同时放大后的图片会在相应区域显示出来。

以下是两个示例：

1. 在Codepen上演示：https://codepen.io/anon/pen/eYOjKw

2. 在JSFiddle上演示：https://jsfiddle.net/wmyx78tq/1/