javascript - JavaScript 中的长文本滚动

Question

我需要在 JavaScript 中滚动一行(从右到左)的长文本。

目前我通过使用计时器更改 margin-left 来做到这一点。

        //Change Margin
    $('#sliderContentText').css('margin-left', -sliderOptions.currentMargin);
    sliderOptions.currentMargin=sliderOptions.currentMargin+sliderOptions.marginSpeed;

还有其他方法吗？

问题是，如果我每 10 毫秒将边距更改 1，则会消耗大量 CPU。

Answer 1

您不应该为此目的使用边距 ( see why ) ...您可以使用 relative position ...

或最佳解决方案: relative position + css transitions

JS

var s = $('#sliderContentText');

setInterval(function(){
  s.toggleClass('moveleft');
},1000);

CSS

#sliderContentText {
  position: relative;
  transition: left 1s;
  left: 0;
}
#sliderContentText.moveleft {
  left: 50px;
}

您应该始终将 jquery 元素存储在函数循环之外以避免内存消耗