Question

我的网站上有背景图像上的动画，特别是图像一直向左移动但是当图像到达结束时它又重新开始。我的问题是，当图像到达末尾（左侧）时，边缘是可见的，当它来到右侧时，我想要它向右侧，当它到达右侧时......在左侧。 / p>

var x=0;
var y=0;

var banner = $("#loading");
banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');

window.setInterval(function(){
banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');
x--;
}, 90);

Answer 1

这是一个动画示例：

var x = 0;

var fps = 30;
var speed = 2;

var bannerWidth = 400;
var imageSize = 128;

setInterval(function() {
    x += speed;
    
    if (x >= bannerWidth-imageSize || x <= 0) {
    	speed *= -1;
    }
    
    $("#banner").css("backgroundPosition", x + "px 0");
}, 1000/fps);

#banner {
    width: 400px;
    height: 128px;
    border: 1px solid red;
    background-image: url("http://icons.iconarchive.com/icons/position-relative/social-1/128/google-icon.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner"></div>

如果你提供HTML和HTML，我可以修改这个例子。 CSS。

如何在背景图像上停止动画

1 个答案: