Question

我正在尝试制作简单的赛车游戏，我想将背景图像无限地向下移动。目前我有一个道路背景图片。

<script>
jQuery(document).ready(function($) {
    var animate = $('body');
    function loopbackground() {
        animate.css('background-position', '0px 0px');
        $({position_x: 0, position_y: 0}).animate({ position_y: -2500}, {
            duration: 12000,
            easing: 'linear',
            step: function() {
                animate.css('background-position', this.position_x+'px '+this.position_y+'px');
            },
            complete: function() {
                loopbackground();
            }
        });
    }
    loopbackground();  
});
</script>

但是图像正在上升而且永远不会下降。

Answer 1

首先，您应该在jsfiddle中启用jQuery。您可以为CSS属性设置动画，因此我们可以定义一个伪造的属性。如果你制作了无缝背景并设定了精确的尺寸，那将是一场无休止的滚动。

var body = $('body');
function loopbackground() {
    body.css('background-position', '0 0');
    body.css('y_pos', 0);
    body.animate({'y_pos': -2500}, {
        duration: 12000,
        easing: 'linear',
        step: function(now, obj) {
            var element = $(obj.elem);
            element.css('background-position', '0px ' + now + 'px');
        },

        complete: function() {
            loopbackground();
        }
    });
}
loopbackground();

jQuery - 无限地向下移动背景图像

1 个答案: