jQuery Marquee liền mạch?

Question

Có thể tạo một vùng chọn liền mạch 100% trong jQuery (hay chỉ là javascript nhưng jQuery thích)?

Tôi đã tạo vùng chọn đơn giản di chuyển sang trái cho đến khi màn hình tắt rồi chỉ cần nhảy (khi không nhìn ra) sang phải và bắt đầu lại. Tuy nhiên tôi rất thích nó để không có sự chờ đợi.

Cách duy nhất tôi có thể nghĩ về việc này là sao chép văn bản và đặt nó sau văn bản đầu tiên, sau đó hoán đổi lại một lần nữa. Tuy nhiên tôi không có ý tưởng làm thế nào để thực hiện điều này trong jQuery, tôi đã nhìn vào jQuery .clone() nhưng không thể làm cho nó hoạt động chính xác, mọi thứ đều nhảy.

Bất kỳ ý tưởng nào?

Cảm ơn thời gian của bạn,

Answer 1

Với đánh dấu sau:

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

Đối với việc sao chép, tôi muốn làm một cái gì đó như thế này:

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

Di chuyển và trao đổi các nhịp là khá dễ. Dưới đây là ví dụ đầy đủ chức năng:

$(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.

Disclaimer:

tôi không khuyên bạn nên điều này cho bất kỳ trang web chuyên nghiệp. Tuy nhiên, nó có thể hữu ích nếu bạn đang cố gắng để tái tạo một cái nhìn retro thập niên 1990.