使用鼠标全屏滚动图像答案

【问题标题】：Fullscreen image scrolling with mouse使用鼠标全屏滚动图像
【发布时间】：2014-07-21 10:10:21
【问题描述】：

我想制作一个溢出屏幕大小的全屏图像（用灯箱展开图像打开），以便鼠标悬停在窗口的边或角上滚动 -> 例如。当鼠标在右上角时 - 图像向右滚动，如果它在右下角 - 向右和底部滚动。

有没有 jQuery 插件可以做到这一点？还是 HTML5/CSS3 方法？

【问题讨论】：

请提供小提琴示例。
基本上它是一个漂亮的照片脚本，需要这个实现：no-margin-for-errors.com/projects/… 正如我所见，它使图像全尺寸（作为原始 - 与视口相反），以及容器 div适合它。

【解决方案1】：

您可以为图像赋予以下样式。

max-width:100%;
max-height:100%;

【讨论】：

【解决方案2】：

我找到了这个 sn-p，它的作用就像一个小小的调整的魅力：

// Variables for current position
var x, y;

function handleMouse(e) {
  // Verify that x and y already have some value
  if (x && y) {
    // Scroll window by difference between current and previous positions
    window.scrollBy(e.clientX - x, e.clientY - y);
  }

  // Store current position
  x = e.clientX;
  y = e.clientY;
}

// Assign handleMouse to mouse movement events
document.onmousemove = handleMouse;

【讨论】：