文字走马灯效果的实现

核心思路是通过用margin-left这个属性来控制div的定位，通过不断提高margin-left的值来实现走马灯左右移动的效果，代码中的1218是这个文字div块的宽度，当文字全部移动完后再把div块的margin-left回调到初始的水平，重新开始新一轮的循环。当然如果想变成一个轮子的话也可以通过JS自动获取文字的长度，然后用变量来控制div的外边距何时回调。我这个由于是临时需要的一个功能，所以但是就没想那么多。

下面是JS的代码

 var marginleft = $('#demo').css('marginLeft');
  marginleft = marginleft.toString();
  marginleft = marginleft.substring(0, marginleft.length - 2);
  var ledtSum = 0;
  var titleRuns = setInterval(function () {
    if (ledtSum > -1218) {
      $('#demo').css('marginLeft', ledtSum);
      ledtSum -= 4;
    } else {
      ledtSum = 360;
      $('#demo').css('marginLeft', ledtSum);
    }
  }, 200)

这个方法的优点是极其的简单，缺点是对设备的要求比较高，因为想要滚动的效果越流畅就需要定时器刷新的间隔越短，这样对设备的渲染压力比较大。暂时也没想到什么好的解决办法，等想到了再补吧。