正如你所看到的......它最終會重複，但經過一個完整的黑色背景循環。我想找到一種方法使其成爲實際圖像傳遞的第二種方式，圖像的開頭直接連接到最後，因此您在滾動時看不到黑色。有任何想法嗎？jQuery圖像滑動不會立即重複

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

來源

2013-07-11 Joel Samson

我認爲是問題的原因。

改變這種

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

到

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

來源

2013-07-11 05:24:46 Praveen

可悲的是沒有工作。我添加的變化，仍然不會在圖像的最後瞬間重複。在重新啓動之前，您仍然會看到完整的黑色循環。 –

@JoelSamson檢查這個http://jsfiddle.net/EbX9y/。如果您打開控制檯，您可以找到差異。無論如何，更新小提琴，所以我們可以找出問題。 – Praveen

非常感謝！我找到了修復程序。我不得不改變：'背景：＃000 url（Logo.jpg）repeat-y向左滾動頂部;'到'背景：＃000 url（Logo.jpg）repeat-x向左滾動頂部;' –

答案是在CSS我不得不更改下面的代碼：

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

要

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

更改repeat- ý到repeat- X允許它沒有間隔重複由於圖像在x滾動不是y之間。該解決方案的

例子可以在這裏找到： jsfiddle.net/EbX9y/10

來源

2013-07-11 16:59:44

jQuery圖像滑動不會立即重複

HTML

CSS

JS

回答

相關問題