标签：
今天在百度知道上帮网友解决一些问题，看到了一个类似跑马灯的效果，这个以前也有想过要写，但是没有什么头绪和时间，现在顺便就一起解决了。
这个LED跑马灯的效果是怎么一个原理，现分析如下：
假设有一个要进行变化的对象数组，我们称之为A对象。如下：
这个等变化的数组长度为5，
有颜色数组，我们称之为B，如下：
这个长度为3。
要分析出原理，我们要根据事物的表象去分析得到事物内在的规律与原理，根据这个原理与规律我们才能得出解决办法。 我们进行一次模拟：
（1）初始状态
（2）移动过程中的某一状态
我们可以写出这样的一个过程代码，这里用伪代码进行解释说明：
j是从0开始进行遍历到高位，直至结束
//颜色数组（简称B）
var liIndex = 0; //游标，用于进行变化的下标变量。
这个过程都很正常，没有什么特别需要注意和处理的地方，关键是，当游标超出A对象的长度的时候，如何进行一个处理？
如图所示状态：
我们通过增加一个假想长度，让B能够继续完成它的遍历，但实际上对B而言，它面对的对象“A”是一个我们加了一个长度的假想对象A，目的只是让B完成它的遍历，而A对象仍然是不可能发生变化的，I游标的值，最大也是为A对象的长度，但变化游标的值却是可以移动到假想对象“A”的最后一个位置上的，所以liIndex是可以继续加大的，而liIndex与i的之间的距离，也就是offset偏移量的值，同时也是我们给A对象增加的假想长度。那么这个过程会持续到哪一个位置上结束？
对，没有错，就是当B完成了在A最后一个位置上的遍历时如下：
所以，可以得出，一次全程的过程的终结状态是在于offset的值=B数组的长度，而offset是由liIndex与i的差进行计算的，所以得到如下公式：
offset = liIndex - A.length;
判断结束状态为:
if( offset >= B.length ){ 结束，恢复回初始状态; }
至此，整个过程已经走完一次。所以，得到这个思路后，写代码就容易多了。
<!DOCTYPE html>
<html>
<head>
<title>Test4</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
.box{ width:500px; margin:20px auto; }
.box ul{list-style: none;}
.box ul li { width:10px; height: 10px; background-color: #ccc; float:left;}
</style>
</head>
<body>
<div id='box' class='box'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
//颜色数组（简称B）
var colorArr = [ '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00' ];
var liIndex = 0; //这里是一个数组游标，标记当前从哪个位置开始变化设置颜色
var liArr = undefined; //进行变化的对象
init();
//初始化
function init(){
//我这里用的是li标签，如果你的是div，则将所有需要变化的div存在在一个变量中，我这里放的是liArr这个变量.
liArr = document.getElementById('box').children[0].children; //简称A对象
//调用跑马灯函数
fLEDScroller();
}
function fLEDScroller(){
//偏移量
var offset = 0;
//当超出变化对象长度时，但我们仍然需要把后续的颜色给走完，此时，我们假想给变化对象(A)加长len个长度，这个len就是颜色数组(B)的长度，这样加长后，能够让B继续走完，而我们在看到时，因为是假想的，所以相当于隐藏掉超出的颜色，看到的是还未走完的颜色。
if( liIndex - liArr.length + 1 > 0 ){
offset = liIndex - liArr.length + 1;
}
//但是如果假想的长度超过颜色数组（B）的长度时，说明颜色数组（B）已经走完了，可以恢复到初始的位置重新进行一次变化。
if( offset > colorArr.length ){
liIndex = 0;
offse = 0;
}
//i的初始值，分两种情况，1是当游标未超出对象A的长度时，offset=0，2是当游标超出对象A的长度,offset=游标-对象A长度(即得到偏移量),上面已经进行了处理，这里是再说明一下，j的值就等于偏移量的值
for( var i = liIndex - offset, j = offset; i>=0 ; i--, j++ ){
//当偏移量并未超出颜色数组B的长度时，设置颜色
if( j <colorArr.length ){
liArr[i].style.backgroundColor = colorArr[j];
}
else{
liArr[i].style.backgroundColor = '#ccc'; //当超出时，设置为默认的颜色
}
}
//游标自增，进行移动
liIndex++;
//间隔100毫秒进行一次变化
setTimeout( 'fLEDScroller()', 40 );
}
</script>
</html>
标签：
原文地址：http://blog.csdn.net/pandeng4639088/article/details/46550257
