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

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

Answer 1

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

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

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

我认为这可以通过以上描述实现您所寻求的效果，LMK如果这有帮助，那么祝你好运。

基于光标位置的移动元素

1 个答案: