根据鼠标位置移动元素

Question

我正在制作一款基于鼠标位置滑动容器的动画。基本上看起来就像这样：

|--------------| <-- viewport
||-------------|--------| <- Image(
||             |        | 
||-------------|--------|
|--------------|

我正在监听窗口的mousemove事件，然后转换图像-viewport.pageX。一切正常，图像移动正确，但是我似乎在图像上有一个“死区”，鼠标移动事件无效。看起来死区正好是不显示的图像量。我假设需要进行一些数学计算，将该空间分成两半并从我移动图像的数量中减去它，但我无法完全弄清楚。

以下是捕获鼠标位置的代码：

$(window).on('mousemove', function(e) {
    globals.curPosX = (e.pageX).clamp(0, $('.home-wrapper .bg').width() - window.innerWidth);
    globals.curPosY = (e.pageY).clamp(0, $('.home-wrapper .bg').height() - window.innerHeight);
});

实际移动图像的代码：

draw: {
    start: function() {
        window.anim = requestAnimationFrame(draw.start);

        var content = document.getElementById('content');

        globals.tempPosX += (globals.curPosX - Mitek.home.globals.tempPosX) * 0.075;
        Mitek.home.globals.tempPosY += (globals.curPosY - globals.tempPosY) * 0.015;

        if ( has3d ) {
            content.style.WebkitTransform = 'translate3d(' + -globals.tempPosX + 'px, 0px, 0)';
            content.style.MozTransform = 'translate3d(' + -.globals.tempPosX + 'px, 0px, 0)';
            content.style.transform = 'translate3d(' + -.globals.tempPosX + 'px, 0px, 0)';
        } else {
            content.style.left = -globals.curPosX + 'px';
        }
    },
    stop: function() {
        cancelAnimationFrame(anim)
    }
}

就像我之前说的，这一切都运行良好并且看起来很好，但我无法弄清楚如何考虑侧面的额外空间。有什么建议吗？

- jcbfshr

Answer 1

没有一个演示实例，改进现有代码会有些困难，但我认为有多种方法可以实现这个效果。

我曾经参与过一个项目，在其中我们使用 CSS 和 jQuery 构建了一个可拖动的视口，它可以显示其后面图像的一部分。我们使用了一个非 jQueryUI 的 drags() 函数，可以在 CSS-Tricks 上找到，但你也可以轻松地将其替换为 jQueryUI 的 draggable()。你还可以使用 mousemove 来动画移动滑块，而不是拖动，甚至将其位置锁定到光标的位置，以便光标始终悬停在可见部分上方。你还可以适应垂直滑动，使用顶部和底部的遮罩和更大的包装器。

这里有一个fiddle，演示了一个可以拖动的滑块，覆盖在图像上面并揭示其中一部分。它需要一些技巧，因为您必须确保当视口被向左/向右极端拖动时，盲板的大小足够大以遮挡图像，并且滑块本身的偏移量取决于盲板的宽度。这意味着它适用于一次性解决方案或批量具有相似大小的图像，但作为许多图像大小场景的动态解决方案，可能不是您所需要的。

我认为这实现了您描述的效果，如果有帮助，请告诉我，祝您好运。

- Dpeif