jQuery - 光标周围覆盖背景的闪烁图像

Question

我正在尝试使用 jQuery/CSS 创建缩放/平移/预览。

用鼠标在缩略图图像上移动带有背景的 div 时。我得到了这个闪烁的结果。

在鼠标所在的位置绘制叠加层会触发 mouseleave 函数。我怎样才能阻止这种情况发生？

const ZOOM_LEVEL = 2;

$(document).ready(function() {
  $(".thumb").mouseenter(enter);
  $(".thumb").mouseleave(leave);
  $('.thumb').mousemove(zoom);
});

function zoom(event) {
  const p = calculateZoomOverlay({x: event.pageX, y: event.pageY}, $(event.target));
  moveCursorOverlay(p.left, p.top);
  movePreviewBackground(p.offsetX, p.offsetY);
}

function calculateZoomOverlay(mouse, thumb) {
  let t = thumb.position();
  t.width = thumb.width();
  t.height = thumb.height();

  let z = {}; // Zoom overlay
  z.width = t.width / ZOOM_LEVEL;
  z.height = t.height / ZOOM_LEVEL;
  z.top = mouse.y - z.height / 2;
  z.left = mouse.x - z.width / 2;
  
  // Bounce off boundary
  if (z.top < t.top) z.top = t.top;
  if (z.left < t.left) z.left = t.left;
  if (z.top + z.height > t.top + t.height) z.top = t.top + t.height - z.height;
  if (z.left + z.width > t.left + t.width) z.left = t.left + t.width - z.width;

  z.offsetX = (z.left - t.left) / z.width * 100;
  z.offsetY = (z.top - t.top) / z.height * 100;
  
  return z;
}

function moveCursorOverlay(left, top) {
   $('.cursor-overlay').css({
    top: top,
    left: left
  });
}

function movePreviewBackground(offsetX, offsetY) {
  $('.preview').css('background-position-x', `${offsetX}%`)
  $('.preview').css('background-position-y', `${offsetY}%`)
}

function enter() {
  // Setup preview image
  const imageUrl = $(this).attr('src');
  const backgroundWidth = $('.preview').width() * ZOOM_LEVEL;
  $('.preview').css({
    'background-image': `url(${imageUrl})`,
    'background-size': `${backgroundWidth} auto`
  });
  $('.preview').show();

  $('.cursor-overlay').width($(this).width() / ZOOM_LEVEL);
  $('.cursor-overlay').height($(this).height() / ZOOM_LEVEL);
  $('.cursor-overlay').show();
}

function leave() {
  $('.preview').hide();
  $('.cursor-overlay').hide();
}

.image-container {
  padding: 5px;
  display: flex;
  flex-direction: row;
}

.thumbnail-container {
  display: flex;
  flex-direction: column;
}

.thumb {
  margin-bottom: 5px;
  width: 160px;
  height: 100px;
}

.thumb:hover {
  -moz-box-shadow: 0 0 5px orange;
  -webkit-box-shadow: 0 0 5px orange;
  box-shadow: 0 0 5px orange;
}

.preview {
  display: none;
  margin-left: 15px;
  width: 640px;
  height: 400px;
  border: 3px solid orange;
}

.cursor-overlay {
  display: none;
  background-color: rgba(0, 150, 50, 0.5);
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <div class="thumbnail-container">
    <img class="thumb" alt="thumbnail" src="https://i.imgur.com/sbrYaxH.jpg">
    <img class="thumb" alt="thumbnail" src="https://i.imgur.com/2PpkoRZ.jpg">
    <img class="thumb" alt="thumbnail" src="https://i.imgur.com/3lOTtJV.jpg">
  </div>

  <div class="cursor-overlay"></div>
  <div class="preview"></div>
</div>

Codepen

包含 Codepen，可能更容易在那里进行更改。

Answer 1

因为在鼠标处绘制元素会触发 mouseleave 函数，所以向 css 添加 pointer-events: none 会阻止这种情况发生。

追逐令人发狂的错误。