核心思路是通过用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)
这个方法的优点是极其的简单,缺点是对设备的要求比较高,因为想要滚动的效果越流畅就需要定时器刷新的间隔越短,这样对设备的渲染压力比较大。暂时也没想到什么好的解决办法,等想到了再补吧。