0

正如你所看到的......它最终会重复，但在一个完整的黑色背景循环之后。我想找到一种方法来制作它，以便在实际图像通过的第二秒，图像的开头就在末尾连接，因此您在滚动时看不到黑色。有任何想法吗？

HTML

<body>
    <div id="wrapper">
        <div id="header">
        </div>
    </div>
</body>

CSS

/* Give the header a height and a background image */
#header{
    height:150px; 
    background: #000 url(Logo.jpg) repeat-y scroll left top;
    text-align:center;
}

JS

var scrollSpeed = 50;        // Speed in milliseconds
var step = 1;               // How many pixels to move per step
var current = 0;            // The current pixel row
var imageHeight = 4300;     // Background image height
var headerHeight = 300;     // How tall the header is.

//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);

function scrollBg(){

    //Go to next pixel row.
    current -= step;

    //If at the end of the image, then go to the top.
    if (current == restartPosition){
        current = 0;
    }

    //Set the CSS of the header.
    $('#header').css("background-position",current +"px 1");


}

//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);
4

2 回答 2

0

答案在CSS中，我必须更改以下代码：

background: #000 url(Logo.jpg) repeat-y scroll left top;

至

background: #000 url(Logo.jpg) repeat-x scroll left top;

将repeat- y更改为repeat- x允许它在没有间距的情况下重复，因为图像在x 而不是y 上滚动。

可以在此处找到解决方案示例： jsfiddle.net/EbX9y/10

于 2013-07-11T16:59:44.070 回答
0

我认为是问题的原因。

改变这个

var init = setInterval("scrollBg()", scrollSpeed);

至

var init = setInterval(function(){scrollBg()}, scrollSpeed);
于 2013-07-11T05:24:46.280 回答