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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了巧用JS数组的slice方法进行循环排序，仿学步园文章推荐滚动效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5867字，纯文字阅读大概需要9分钟。

内容图文

1. 仿站效果

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

技术分享图片

2. 原理猜想

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

原理如下：

技术分享图片

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

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

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

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

                 1
                <
                div 
                id
                ="scat"
                >
                 2
                <
                ul
                >
                 3
                <
                li
                ><
                a 
                href
                ="https://www.xuebuyuan.com/2201282.html"
                 rel
                ="bookmark"
                 title
                ="详细阅读作业的提交和监控（二）"
                >作业的提交和监控（二）</a></li> 4</ul> 5<ul> 6<li><a href="https://www.xuebuyuan.com/2201280.html" rel="bookmark" title="详细阅读作业的提交和监控（一）">作业的提交和监控（一）</a></li> 7</ul> 8<ul> 9<li><a href="https://www.xuebuyuan.com/2198273.html" rel="bookmark" title="详细阅读Boost – Function 分析">Boost – Function 分析</a></li>10</ul>11<ul>12<li><a href="https://www.xuebuyuan.com/2198272.html" rel="bookmark" title="详细阅读奇技淫巧 – C/C++ 宏自身迭代">奇技淫巧 – C/C++ 宏自身</a></li>13</ul>14<ul>15<li><a href="https://www.xuebuyuan.com/2198221.html" rel="bookmark" title="详细阅读模板的 SFINAE 原则">模板的 SFINAE 原则</a></li>16</ul>17<ul>18<li><a href="https://www.xuebuyuan.com/2198220.html" rel="bookmark" title="详细阅读Octopress 和 Git 的结合">Octopress 和 Git 的结合</a></li>19</ul>20<ul>21<li><a href="https://www.xuebuyuan.com/2198208.html" rel="bookmark" title="详细阅读Electric-fence 介绍">Electric-fence 介绍</a></li>22</ul>23<ul>24<li><a href="https://www.xuebuyuan.com/2198206.html" rel="bookmark" title="详细阅读原子操作浅谈">原子操作浅谈</a></li>25</ul>2627<ul>28<li><a href="https://www.xuebuyuan.com/2201282.html" rel="bookmark" title="详细阅读作业的提交和监控（二）">作业的提交和监控（二）</a></li>29</ul>30<ul>31<li><a href="https://www.xuebuyuan.com/2201280.html" rel="bookmark" title="详细阅读作业的提交和监控（一）">作业的提交和监控（一）</a></li>32</ul>33<ul>34<li><a href="https://www.xuebuyuan.com/2198273.html" rel="bookmark" title="详细阅读Boost – Function 分析">Boost – Function 分析</a></li>35</ul>36<ul>37<li><a href="https://www.xuebuyuan.com/2198272.html" rel="bookmark" title="详细阅读奇技淫巧 – C/C++ 宏自身迭代">奇技淫巧 – C/C++ 宏自身</a></li>38</ul>39<ul>40<li><a href="https://www.xuebuyuan.com/2198221.html" rel="bookmark" title="详细阅读模板的 SFINAE 原则">模板的 SFINAE 原则</a></li>41</ul>42<ul>43<li><a href="https://www.xuebuyuan.com/2198220.html" rel="bookmark" title="详细阅读Octopress 和 Git 的结合">Octopress 和 Git 的结合</a></li>44</ul>45<ul>46<li><a href="https://www.xuebuyuan.com/2198208.html" rel="bookmark" title="详细阅读Electric-fence 介绍">Electric-fence 介绍</a></li>47</ul>48<ul>49<li><a href="https://www.xuebuyuan.com/2198206.html" rel="bookmark" title="详细阅读原子操作浅谈">原子操作浅谈</a></li>50</ul>51</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）：

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

             1 $(function(){
 2 3var arr = [];
 4 5   $(‘a‘).each(function(){
 6     arr.push($(this).text())
 7 8  });
 910//console.log(arr);111213var t = setTimeout(function(){
1415    rr();
16
　　　　// 延时处理函数（递归）
17function rr()
18    {
19       arr = cc(arr);
20       $.each(arr,function(index,element){
21         $(‘a‘).eq(index).html(arr[index])
22      });
23             t = setTimeout(function(){
24        rr();
25       },1000)
26// clearTimeout(t);27    }
28   },1000)
293031function cc(a)
32  {
33return a.slice(1).concat(a.slice(0,1));
34  }
35363738 });

效果如下：

技术分享图片

4. 总结

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

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

参考文献

1. 仿造学步园效果

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

原文：https://www.cnblogs.com/yqmcu/p/11753608.html

内容总结

以上是互联网集市为您收集整理的巧用JS数组的slice方法进行循环排序，仿学步园文章推荐滚动效果全部内容，希望文章能够帮你解决巧用JS数组的slice方法进行循环排序，仿学步园文章推荐滚动效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1273680.html

来源：【匿名】

【上一篇】js 过滤数组里对象的某个属性【下一篇】javascript 怎么调用php方法

更多 ►

【巧用JS数组的slice方法进行循环排序，仿学步园文章推荐滚动效果】教程文章相关的互联网学习教程文章

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

1. 仿站效果今天看到学步园网站右边有个文章推荐的滚动栏目，觉得挺有意思，效果如下：2. 原理猜想如此小动画的效果，首先想到的可能是一个长数据列表，不断变化列表的长度，利用外部边框的遮罩裁剪效果，从而做出就像是文章标题在滚动的效果。原理如下：图中，黑色边框代表显示区域，灰色边框代表 ul>li 列表项目，Time1~Time3 分别代表不同时刻的列表项运行高度。双倍内容的列表项目整体上移动，利用显示区域的遮罩效果，达到...

JS数组之操作方法【代码】【图】

操作方法1. concat() 拼接数组使用此方法可以拼接元素，并组成新数组，结果返回新数组的副本。（不会影响原数组）// concat() 连接元素返回新元素副本 var arr = ["zero",1,"two",3,"four",5,"six",7,"eight"]; // 连接一个元素 console.log(arr.concat(9)); // 返回新数组的副本 console.log(arr.concat("9")); console.log(arr); // 依然是原数组，这就证明此方法返回的是一个副本 // 还能连接对象 console.log(arr.concat({"nam...

JS数组定义及详解【代码】

1、什么是数组数组就是一组数据的集合其表现形式就是内存中的一段连续的内存地址数组名称其实就是连续内存地址的首地址 2、关于js中的数组特点数组定义时无需指定数据类型数组定义时可以无需指定数组长度数组可以存储任何数据类型的数据（比如说一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的）创建数组的语法：var arr=[值1,值2,值3]; //隐式创建var arr=new Array(值1,值2,值3); //直接实...

js数组去重

function deleteRepeat(){//删除重复的 var _arr=[1,1,1,3,3,3,5,8,8,9,10]; //console.log(_arr); for(var i=0;i<_arr.length;i++){ for(var n=i+1;n<_arr.length;n++){ if(_arr[i]==_arr[n]){ _arr.splice(n,1); n--; } } ...

js数组方法的总结_js数组的常见方法（配上思维导图）【代码】【图】

这是再次看《JavaScript高级程序设计》后，想要记录点内容来帮助学习，毕竟好记性不如烂笔头嘛，这里没有详细的记录每个方法，就大概写了一下，具体详细的方法大家可以查看官方文档进行查看目录如下目录插入pushunshift移出popshiftslice(number1[,number2])不改变原数组一个参数（从当前到结束）两个参数（从第一个参数到第二个参数，不包含最后一个）splice(（起始位置[,要删除的数目，要插入的项]）)改变原数组一个参数两个参数...

JavaScript js 数组里面的对象根据对象值排序【代码】

JavaScript：　　　　　　let row=[　　　　　　　　　　{id:"1",name:"张三",age:"12"},　　　　　　　　　　{id:"2",name:"李四",age:"10"},　　　　　　　　　　{id:"3",name:"王五",age:"52"},　　　　　　　　　　{id:"4",name:"赵六",age:"32"}　　　　　　　　　]　　用下面这个函数直接自动排序row.sort(function (a,b){return a.age-b.age;})　let row=[　　　　　{id:"1",name:"李四",age:"10"},　　　　　{id:"2",name:...

js数组常用方法总结【代码】

最近工作中经常用到数组操作，每次都傻傻不知道怎么用，今天有时间整理了一下，希望对大家有帮助！这些基础的知识，要熟记于心。1、 join()功能：将数组中所有元素都转化为字符串并连接在一起。输入：分隔符，默认为逗号输出：分隔符分割的字符串1var a = [1,2,3]; 2 a.join(); // =>"1,2,3"3 a.join(";");// =>"1;2;3"2、 reverse()功能：将数组中的元素颠倒顺序。输入：无输出：逆序的数组1var a = [1,2,3]; 2 a.reverse().jo...

js数组去重算法【代码】

来来来，整理完数组排序，咱们再来看看数组去重。这个可以说有很多方式了。之前看过的算法方式太多，导致思路其实有时候真的很受限，不过也是整理来学习用的，如有雷同，纯属巧合啊，小婊贝们~　　首先呢，我们来看看思路比较直接的方法，基本思路就是声明一个新数组arr_n，将【0】这个成员压入arr;然后从【1】开始循环当前数组，设置一个变量a，给他一个初始值1；内层嵌套从【0】对arr_n数组的循环，用外层对当前数组循...

js数组合并（一个数组添加到另一个数组里面）方法【代码】【图】

js定义两个数组。var arrA=[1,2,3];var arrB=[4,5,6];要实现[1,2,3,4,5,6]，如果直接arrA.push(arrB); 则arrB只会作为了arrA的一个元素。执行如图：要合并或连接，则需要使用concat() 方法。concat(Array) 方法concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。array1.concat([item1[, item2[, . . . [, itemN]]]])说明concat 方法返回一个 Array 对象，其中包含了 array1 和提...

JS数组【代码】

var arr = new Array(1,2,3); document.write(arr.length+"<br/>"); // delete arr[0]; 去掉数组第一个元素，数组长度不变 // arr.pop(); 去掉数组最后一个，数组长度-1 // arr.shift(); 去掉数组第一个，数组长度-1// arr.push("我","是");//在数组尾部添加元素 // arr.unshift("我","是");//在数组头部添加元素 document.write(arr.length+" "+arr.toString()+"<br/>" );var arr1 = new Array(4,5,6);// concat连接数组生...

Js 数组——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()【代码】

转自: xiaohong_oathfilter(): var filteredArray = array.filter(callback[, thisObject]);参数说明：callback：要对每个数组元素执行的回调函数。thisObject ：在执行回调函数时定义的this对象。//过滤掉小于 10 的数组元素：//代码： function isBigEnough(element, index, array) {return (element >= 10); } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // 12, 130, 44 //结果：[12, 5, 8, 130, 44].filter(...

js数组遍历some,foreach,map,filter,every对比【代码】

1、 [...].some(ck)函数 ---- 某个一个为true，则为true对数组中每个元素执行一次ck函数，知道某个元素返回true，则直接返回true。如果都返回false,则返回false检查整个数组中是否有满足ck函数的元素。1、var result = [1,5,3,6].some( (v,i) => (v>10) ) //所有元素都不满足，返回result = false2、var result = [10,5,30,60].some( (v,i) => (v<10) ) //有一个(多个)满足，返回result = true 2、 ...

一个js数组操作题【代码】

JS 控制一串数组，每隔2两秒显示 7个数，要求自动拼接。列如：var nums=‘1,2,3,4,5,6,7,8,9‘; 第一次输出‘1,2,3,4,5,6,7’ 第二次输出‘8,9,1,2,3,4,5‘ 第三次输出‘6,7,8,9,1,2,3‘var array = [1,2,3,4,5,6,7,8,9];var dom = document.getElementById(‘a‘);function go(){var result = array.splice(0,7);array = array.concat(result);dom.innerHTML = result.join("");setTimeout(arguments.callee,3000);}go();原文：...

JS 数组去重学习日志#1【代码】【图】

5.10 JS 数组去重学习日志#1 参考文章1（Array.from()）：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from 参考文章2 (Set)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set//问题：var arr=[1,1,1,2,3,4,5,6,12,341235,31,5]; //将此数组进行去重//解决代码 window.onload=function () {console.log(Array.from(new Set(arr))) } 第一步...

javascript-D3.js用数组替换tsv文件【代码】

我一直在尝试实现以下chart,而未从其他来源获取数据时使用d3.tsv. 按照其他类似的question中的说明,我尝试替换了这部分代码：d3.tsv("data.tsv", type, function(error, data) {if (error) throw error;var cities = data.columns.slice(1).map(function(id) {return {id: id,values: data.map(function(d) {alert(d.date);alert(id);return {date: d.date, temperature: d[id]};})};});带有：var data=[ {date:20111001,temperatu...

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

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

内容导读

内容图文

1. 仿站效果

2. 原理猜想

3. 实现优化

4. 总结

参考文献

内容总结

内容备注

内容手机端

【巧用JS数组的slice方法进行循环排序，仿学步园文章推荐滚动效果】教程文章相关的互联网学习教程文章

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

JS数组之操作方法【代码】【图】

JS数组定义及详解【代码】

js数组去重

js数组方法的总结_js数组的常见方法（配上思维导图）【代码】【图】

JavaScript js 数组里面的对象根据对象值排序【代码】

js数组常用方法总结【代码】

js数组去重算法【代码】

js数组合并（一个数组添加到另一个数组里面）方法【代码】【图】

JS数组【代码】

Js 数组——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()【代码】

js数组遍历some,foreach,map,filter,every对比【代码】

一个js数组操作题【代码】

JS 数组去重学习日志#1【代码】【图】

javascript-D3.js用数组替换tsv文件【代码】

JS数组 - 相关标签

循环 - 相关标签

排序 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程