巧用JS数组的slice方法进行循环排序，仿学步园文章推荐滚动效果

1. 仿站效果

今天看到学步园网站右边有个文章推荐的滚动栏目，觉得挺有意思，效果如下：

2. 原理猜想

如此小动画的效果，首先想到的可能是一个长数据列表，不断变化列表的长度，利用外部边框的遮罩裁剪效果，从而做出就像是文章标题在滚动的效果。

原理如下：

图中，黑色边框代表显示区域，灰色边框代表 ul>li 列表项目 ，Time1~Time3 分别代表不同时刻的列表项运行高度。

 双倍内容的列表项目整体上移动，利用显示区域的遮罩效果，达到一种标题在轮番切换的错觉。

至于为什么要双倍内容？是因为在运动到底部内容的时候，不会因为内容都在上方，而出现空白。

查看源代码发现，基本和上面的猜想一致。

<div id="scat">
                <ul>
            <li><a href="https://www.xuebuyuan.com/2201282.html" rel="bookmark" title="详细阅读作业的提交和监控（二）">作业的提交和监控（二）</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2201280.html" rel="bookmark" title="详细阅读作业的提交和监控（一）">作业的提交和监控（一）</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198273.html" rel="bookmark" title="详细阅读Boost – Function 分析">Boost – Function 分析</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198272.html" rel="bookmark" title="详细阅读奇技淫巧 – C/C++ 宏自身迭代">奇技淫巧 – C/C++ 宏自身</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198221.html" rel="bookmark" title="详细阅读模板的 SFINAE 原则">模板的 SFINAE 原则</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198220.html" rel="bookmark" title="详细阅读Octopress 和 Git 的结合">Octopress 和 Git 的结合</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198208.html" rel="bookmark" title="详细阅读Electric-fence 介绍">Electric-fence 介绍</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198206.html" rel="bookmark" title="详细阅读原子操作浅谈">原子操作浅谈</a></li>
        </ul>
            
                <ul>
            <li><a href="https://www.xuebuyuan.com/2201282.html" rel="bookmark" title="详细阅读作业的提交和监控（二）">作业的提交和监控（二）</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2201280.html" rel="bookmark" title="详细阅读作业的提交和监控（一）">作业的提交和监控（一）</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198273.html" rel="bookmark" title="详细阅读Boost – Function 分析">Boost – Function 分析</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198272.html" rel="bookmark" title="详细阅读奇技淫巧 – C/C++ 宏自身迭代">奇技淫巧 – C/C++ 宏自身</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198221.html" rel="bookmark" title="详细阅读模板的 SFINAE 原则">模板的 SFINAE 原则</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198220.html" rel="bookmark" title="详细阅读Octopress 和 Git 的结合">Octopress 和 Git 的结合</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198208.html" rel="bookmark" title="详细阅读Electric-fence 介绍">Electric-fence 介绍</a></li>
        </ul>
                <ul>
            <li><a href="https://www.xuebuyuan.com/2198206.html" rel="bookmark" title="详细阅读原子操作浅谈">原子操作浅谈</a></li>
        </ul>
            </div>

3. 实现优化

但是，列表项目多写一倍，难免有些累赘，代码也不干净。

有没有其他的实现方式呢？

既然是动画，我们都知道，动画都是借助人眼的视觉暂留效果来实现的，如果只是人为的改变title的标题排序，是不是同样实现同样的效果呢（类比小人书的，每张图都是有一点点差异，在翻阅的速度变快的时候，好像小人书里的人物真的在跑起来。）

因此，在设计列表的时候，只是写一倍的列表项，然后通过编程实现列表的排序算法。

说到这个算法，也很简单，借助于数组存放 li 列表中的内容，然后定时改变数组的值，然后渲染列表就实现了列表项的排序。

举例：

对于数组  a = [1,2,3,4,5,6] ； 我们希望数组运动起来，依次就要实现：

a = [1,2,3,4,5,6]; // time1

a = [2,3,4,5,6,1]; // time2

a = [3,4,5,6,1,2]; // time3

a = [4,5,6,1,2,3]; // time4

a = [5,6,1,2,3,4]; // time5

a = [6,1,2,3,4,5]; // time6

a = [1,2,3,4,5,6]; // time7 (循环)

如此改变值，数组就好像动起来了。

但是，人工实现的话是很容易，但是如何封装成函数，让它自动适应数组条数。

考虑数组Array有slice方法，用于数组的切割。原型如下：

// slice 原型
arr.slice([begin[, end]])

// slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。
// 原始数组不会被改变。

因此，如下函数可以实现数组的动态变化：

/**
 * 数组循环
 * param:arr Array 待变化数组
 * return:变化后的数组
 */
function change(arr)
{
  return a.slice(1).concat(a.slice(0,1));
}

于是，仿写功能代码（引入jQuery）：

    <ul>
            <li><a href="https://www.xuebuyuan.com/2201282.html" rel="bookmark" title="详细阅读作业的提交和监控（二）">1 作业的提交和监控（二）</a></li>
            <li><a href="https://www.xuebuyuan.com/2201280.html" rel="bookmark" title="详细阅读作业的提交和监控（一）">2 作业的提交和监控（一）</a></li>
            <li><a href="https://www.xuebuyuan.com/2198273.html" rel="bookmark" title="详细阅读Boost – Function 分析">3 Boost – Function 分析</a></li>
            <li><a href="https://www.xuebuyuan.com/2198272.html" rel="bookmark" title="详细阅读奇技淫巧 – C/C++ 宏自身迭代">4 奇技淫巧 – C/C++ 宏自身</a></li>
            <li><a href="https://www.xuebuyuan.com/2198221.html" rel="bookmark" title="详细阅读模板的 SFINAE 原则">5 模板的 SFINAE 原则</a></li>
            <li><a href="https://www.xuebuyuan.com/2198220.html" rel="bookmark" title="详细阅读Octopress 和 Git 的结合">6 Octopress 和 Git 的结合</a></li>
            <li><a href="https://www.xuebuyuan.com/2198208.html" rel="bookmark" title="详细阅读Electric-fence 介绍">7 Electric-fence 介绍</a></li>
            <li><a href="https://www.xuebuyuan.com/2198206.html" rel="bookmark" title="详细阅读原子操作浅谈">8 原子操作浅谈</a></li>
</ul>

$(function(){
    
  var arr = [];
  
  $('a').each(function(){
    arr.push($(this).text())
    
  });
  
  //console.log(arr);
  
  
  var t = setTimeout(function(){
    
    rr();
    
　　　　// 延时处理函数（递归）
    function rr()
    {
      arr = cc(arr);
      $.each(arr,function(index,element){
        $('a').eq(index).html(arr[index])
      });
            t = setTimeout(function(){
        rr();
      },1000)
      // clearTimeout(t);
    }
  },1000)
  
  
  function cc(a)
  {
    return a.slice(1).concat(a.slice(0,1));
  }
  
  
  
});

效果如下：

4. 总结

1. 动画的实现原理是利用视觉暂留效应，与实现方式无关。

2. 数组的浅拷贝方法 Slice(start,[end])  ，所谓浅拷贝，也是不改变数组原值。 

参考文献

1. 仿造学步园效果

2. Array.prototype.slice() - JavaScript | MDN