的 HTML

Question

正如你所看到的那样......它将最终重复但是在完整的黑色背景循环之后。我想找到一种方法使它成为实际图像通过的第二个，图像的开始就在最后连接，所以你在滚动时看不到黑色。有什么想法吗？

的 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);

Answer 1

我认为是问题的原因。

更改此

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

到

var init = setInterval(function(){scrollBg()}, scrollSpeed);

Answer 2

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

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

到

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

更改repeat- y 重复 - x 允许重复，而不会间隔，因为图像在x上滚动而不是y。

解决方案的示例可以在这里找到： jsfiddle.net/EbX9y/10

jQuery图像向右滑动不会立即重复

的 HTML

的 CSS

的 JS

2 个答案: