javascript中的增強型字幕標記。 如何使它更平滑？

Question

我已經讀到<marquee>標簽將在html5中返回...但是，我需要一個可以在IE6中運行的解決方案...因此，我給自己做了重新實現Marquee的簡介。標記，使用符合標准的代碼並對其進行增強，以使文本連續循環。

我對javascript的了解非常基礎，因此我將其用作自學的手段。

我的第一次嘗試使用jQuery的動畫功能……它非常平滑，但是卻導致CPU峰值，並且頁面上的任何其他腳本運行非常緩慢。

因此，我已經基於http://jqueryfordesigners.com/fun-with-overflows/了第二次嘗試，但是我一直抱怨我的新實現還不夠順利...

http://darren.primarysite.net/marqueeTest/

我在業余時間花了幾周時間來嘗試改進它。但是，我很沮喪。 有誰知道我怎樣才能使它更流暢/更快？

我已將我的代碼放入pastebin中-因此很容易查看。

http://pastebin.ca/2048170

在頭上

<script type="text/javascript">
$(document).ready(function() {
$('#marQueeContainer').marQuee({gap: 5});  
$('#marQueeContainer1').marQuee(); 
});
</script>

以及體內的以下物質...

<div id="marQueeContainer">An Example with a 5px text gap...</div>

<div id="marQueeContainer1">An example with defaults...</div>

謝謝，

搶

Answer 1

嘗試更改scrollLeft的增量大小並降低setInterval延遲-當我在jsfiddle中對其進行測試時，它似乎更加平滑。 此外，請盡可能嘗試緩存值。

Answer 2

我會用這樣的東西：

var line = "     My line  ";

function marque() {
    $("#line").val(line);
    line=line.substring(1, line.length) + line.substring(0, 1);
    setTimeout(marque, 200);
}
marque();

HTML

<input id="line" value="" />