jquery - bre.ad(http ://bre. 广告)后台是如何工作的？

Question

Bre.ad有这样的背景，它一直在移动，有一种面包车在路上移动的错觉。我想知道这是如何完成的，是否可以让图像垂直移动而不是水平移动？

Answer 1

整个背景是这个长长的 png 文件，城市景观和云彩是透明背景 png，以多个 div 叠加在它上面。

背景(城镇):

城市景观:

来自页面源的相关 HTML:

<div id="bread-world">
    <div id="puffyclouds" style="background-position: 0 -75px"></div>
    <div id="cityscape" style="background-position: 0 105px;"></div>
    <div id="ocean"></div>
    <div id="town" style="background-position: 0 0;"></div>
    <div id="truck"></div>
</div>

和来自 all.css 的相关 CSS

#town{
    background:url('//bread-images.s3.amazonaws.com/invite/town.png?1308363721') 
    repeat-x 542px 0px;
    width:5806px;
    left:0;
    bottom:0;
    height:599px;
    position:absolute
    }

其他 div 也类似。 repeat-x 属性用于重复背景，以模拟连续滚动的效果。另外，图像的左端和右端对齐，以便平滑过渡。

动画由homepage.js完成缓慢地线性移动 background-position。相关行是:

function r(){
    m.css({backgroundPosition:"0 -75px"}).animate({backgroundPosition:q+"px -75px"},{duration:n,easing:"linear"}),
    k.css({backgroundPosition:"0 0"}).animate({backgroundPosition:o+"px 0"},{duration:n,easing:"linear"}),
    l.css({backgroundPosition:"0 105px"}).animate({backgroundPosition:p+"px 105px"},{duration:n,easing:"linear",complete:r})
}