jquery – bre.ad(http://bre.ad)背景如何工作？

整个背景是这个长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完成,缓慢地将背景位置线性偏移.相关内容如下：

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"},l.css({BACkgroundPosition:"0 105px"}).animate({BACkgroundPosition:p+"px 105px"},easing:"linear",complete:r})
}