Question

我想要实现的是一个带有png透明度的徽标和自动向下滚动的背景，因此它产生的效果就像它在flash中制作的一样。我使用了jquery.backgroundPosition.js插件，它启用了背景滚动。

代码：

HTML

<div id="logo">
    <h1><img src="img/logo.png" alt="The logo" width="420px" height="420px" /></h1>
</div>

CSS

#logo {
margin: 150px 400px;
display: block;
width: 420px;
height: 420px;
overflow: hidden;
background: transparent url('../img/bg.jpg') repeat-y 0 -1500px;
}

JS

$(document).ready(function(){
    $('#logo').animate(
        {backgroundPosition: '0 -99999999px'},
        {duration: 5550000}
    );
});

问题是，在这个解决方案中，动画一开始变得很慢，然后加速，几分钟之后它就会很快完成。我是一个javascript noob，所以我不知道更好的解决方案。

Answer 1

缓和可能有问题。您可以尝试使用线性缓动而不是默认的jswing。

$('#logo').animate(
        {backgroundPosition: '0 -99999999px'},
        {duration: 5550000, easing: 'linear'}
    );

jquery - 滚动背景

1 个答案: