javascript - 基于光标位置移动元素

Question

我正在制作一个根据鼠标位置滑动容器的动画。

基本上是这样的:

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

我正在监听 mousemove 事件的窗口，然后翻译图像 -viewport.pageX。一切正常，图像移动正确，但是，我似乎在图像上有一个“死区”， mousemove 事件什么都不做。似乎死区正是未显示的图像量。我假设有一些数学运算可以将这个空间分成两半，然后从我移动图像或其他东西的量中减去它，但我不太明白。

这是捕获鼠标位置的代码:

$(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)
    }
}

就像我说的，这一切都很好，看起来也不错，我只是不知道如何解释侧面的额外空间。有什么建议吗？

Answer 1

没有 fiddle ，改进现有代码有点困难，但我认为实现这种效果的方法不止一种。

我参与了一个元素，我们使用 CSS 和 jQuery 构建了一个可拖动的视口(viewport)，在它后面显示了图像的一部分。我们使用了在 CSS-Tricks 上找到的非 jQueryUI drags() 函数，但您可以轻松地将其替换为 jQueryUI 的 draggable()。您还可以使用 mousemove 为 slider 的移动设置动画而不是拖动，甚至可以将其位置锁定到光标的位置，以便光标始终悬停在可见部分上。您还可以调整它以适用于垂直滑动，在顶部和底部使用盲板和更大的包装。

这是一个 fiddle 展示了一个 slider ，它可以将图像拖到上方并显示其中的一部分。这有点棘手，因为当视口(viewport)被拖动到左/右极端时，您必须确保百叶窗的尺寸足够大以遮挡图像，并且 slider 本身的偏移量取决于百叶窗的宽度。这意味着它适用于一次性解决方案或一批大小相似的图像，但作为适用于许多图像大小场景的动态解决方案，这可能不是您所需要的。

不过，我认为这可以实现您通过上述描述寻找的效果，如果这有帮助，请 LMK，祝您好运。