Question

我有一个应用程序，我正在使用 CSS3动画在页面上移动图像。想法是你点击一个按钮然后运行下一个动画，这样“精灵”在地图上移动

然而，在移动设备上，我被要求保持地图的大小与桌面相同，但是移动地图而不是精灵，我的问题是如何才能使其工作？

我当前的（真的很早）代码如下所示：

$(document).on("boatAnimationStarted", function(event) {
    window.isAnimating = true;
    var boatElement = $("#boat-sprite");
    var backgroundElement = $("#background");
    var backgroundWidth = backgroundElement.width();
    var backgroundHeight = backgroundElement.height();
    var windowSize = { width: $(window).width(), height: $(window).height() };
    var originalOffset = boatElement.offset();

    window.animationInterval = setInterval(function() {
        var boatOffset = boatElement.offset();
        var working = {
          top: originalOffset.top - (boatOffset.top / 2),
          left: originalOffset.left - (boatOffset.left / 2),
        }

        $("#background").offset(working);
    }, 10);
});

这确实设法移动了一些，但它似乎并不准确，并且不能真正解释 #background 元素在更改位置时的偏移量。所以我猜我应该做相对于背景图像的所有事情（大约1200w X 421h）

所以要做到这一点，你会做这样的事情，我猜是

var relativeOffset = {
 top: boatOffset.top - backgroundElement.offset().top,
 left: boatOffset.left - backgroundElement.offset().left
}

理论上我会相对于大背景图像而不是移动视口获取精灵的偏移量。但那我怎么去移动背景呢？对不起，如果这是一个简单的问题，但这是我第一次使用这种东西，所以我有点困惑。

jQuery移动背景以跟随使用CSS动画定位的元素

0 个答案: