滚动图像

时间:2012-01-05 16:53:43

标签: css

基本上我正在尝试使用MyBB制作一个论坛,从当前主题看起来更加个性化。目前我所拥有的主题是使用1像素宽的100像素,并使用以下代码在标题后面的背景重复,以使其呈现渐变外观:

background: #202020 url(images/1/header.png) top left repeat-x;

我要做的是在那里有滚动图像。要确保它100%清除,请查看此链接并查看标题。 Click to be Taken to Example

所以基本上我如何使用滚动图像完全按照他们在该页面上所做的那样做?

编辑:如果它有帮助,这里是该网站的链接。我正在为朋友制作: Click

Edit2:Logo的完整css如下所示:

#logo {
background: #202020 url(images/1/pan.jpg) top left repeat-x;
border-bottom: 1px solid #000;
    text-align:center;

}

1 个答案:

答案 0 :(得分:4)

尝试这样的事情:(见工作here

HTML:

<div id="header">header</div>
<div id="content">content</div>

CSS:

#header {
    width: 100%;
    height: 321px;
    background: url(http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg) 0 0 repeat-x;
}

JS:

var banner_width = 512;
var banner_x = 0;
function moveBanner() {
    banner_x = (banner_x - 1) % banner_width;
    $('#header').css('background-position', banner_x + 'px 0');
}
setInterval(moveBanner, 50);