javascript - 使用 mousemove 移动子元素

Question

我想知道是否有办法通过移动鼠标来探索div的内容？例如，在 overflow:hidden 的 500px*500px div 内容中包含 1000px*1000px 图片，并且能够看到其余部分将光标放在 div 的右下侧即可显示图片。

如果有办法我应该如何进行？

Answer 1

有什么好看又流畅的东西吗？

jQuery(function($) {

  const $mmGal = $('#mmGal'),
    $mmImg = $('#mmImg'),
    damp = 10; // 1 = immediate, higher number = smoother response

  let X = 0, Y = 0,
    mX = 0, mY = 0,
    wDiff = 0, hDiff = 0,
    zeno, tOut;

  // Get image size after it's loaded
  $mmImg.one('load', function() {
    wDiff = (this.width / $mmGal.width()) - 1;
    hDiff = (this.height / $mmGal.height()) - 1;
  }).each(function() {
    if (this.complete) $(this).trigger("load");
  });

  $mmGal.on({
    mousemove(ev) {
      mX = ev.pageX - this.offsetLeft;
      mY = ev.pageY - this.offsetTop;
    },
    mouseenter() {
      clearTimeout(tOut);
      clearInterval(zeno);
      zeno = setInterval(function() { // Zeno's paradox "catching delay"
        X += (mX - X) / damp;
        Y += (mY - Y) / damp;
        // Use CSS transition
        $mmImg.css({transform: `translate(${-X * wDiff}px, ${-Y * hDiff}px)`});
        // If instead you want to use scroll:
        // $mmGal[0].scrollTo(X * wDiff, Y * hDiff);
      }, 26);
    },
    mouseleave() {
      // Allow the image to move for some time even after mouseleave
      tOut = setTimeout(function() {
        clearInterval(zeno);
      }, 1200);
    }
  });
});

#mmGal {
  position: relative;
  margin: 0 auto;
  width: 500px;
  height: 220px;
  overflow: hidden;
  background: #eee;
}

#mmImg {
  display: block;
}

<div id="mmGal">
  <img id="mmImg" src="/image/BfcTY.jpg">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• 这是与 mousemove element in opposite direction 类似的另一种方法
• http://en.wikipedia.org/wiki/Zeno%27s_paradoxes