無縫的jQuery Marquee？

Question

是否有可能在jQuery中創建100％無縫的選取框（或只是javascript，但jQuery優先）？

我做了一個簡單的選取框，向左移動，直到它離開屏幕，然後簡單地向右跳轉（當視圖出現時）到右側並重新開始。不過，我會喜歡它沒有等待。

我能想到做到這一點的唯一方法是複製文本並將其放在第一個文本之後，然後再將它們交換。然而，我不知道如何在jQuery中實現這一點，我一直在看jQuery的.clone()，但不能正常工作，一切都跳轉。

任何想法？

感謝您的時間，

Answer 1

考慮以下標記：

<div id="marquee">My Text</div> 

對於重複，我會做這樣的事情：

$("#marquee").wrapInner("span"); // wrap "My Text" with a new span 
$("#marquee").append($("#marquee span").clone().hide()); // now there are two spans with "My Text" 

移動和交換的跨度是挺容易。這是一個功能完整的例子：

$(function() { 

    var marquee = $("#marquee"); 
    marquee.css({"overflow": "hidden", "width": "100%"}); 

    // wrap "My Text" with a span (old versions of IE don't like divs inline-block) 
    marquee.wrapInner("<span>"); 
    marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
    marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text" 

    // create an inner div twice as wide as the view port for animating the scroll 
    marquee.wrapInner("<div>"); 
    marquee.find("div").css("width", "200%"); 

    // create a function which animates the div 
    // $.animate takes a callback for when the animation completes 
    var reset = function() { 
     $(this).css("margin-left", "0%"); 
     $(this).animate({ "margin-left": "-100%" }, 3000, 'linear', reset); 
    }; 

    // kick it off 
    reset.call(marquee.find("div")); 

}); 

See it in action。

免責聲明：

我不推薦任何專業的網站。不過，如果你想重現20世紀90年代的復古外觀，它可能會很有用。