dm建站系统,天元建设集团有限公司北京分公司,上海建设工程安全监理网站,用网站的源代码怎么做网站前几天朋友去面试#xff0c;面试官要求当场用九宫格写出一个滚动有规律的大转盘滚动高亮效果#xff0c;结果可想而知。如下图#xff1a; 也就是说当页面刚进来的时候#xff0c;红色方块在左上角#xff0c;接下来按照图上所标注的箭头方向来依次循环。当我听说了这个面… 前几天朋友去面试面试官要求当场用九宫格写出一个滚动有规律的大转盘滚动高亮效果结果可想而知。如下图 也就是说当页面刚进来的时候红色方块在左上角接下来按照图上所标注的箭头方向来依次循环。当我听说了这个面试题之后我就利用空余时间写了一下此效果结果研究了两种方法
方法一首先我想到的是既然要滚动那么当然要运用到定时器后来我就想既然要实现这个轨迹重复的循环下去那么就要用到一些数字变量代码如下
结构 1 ul2 li/li3 li/li4 li/li5 li/li6 li/li7 li/li8 li/li9 li/li
10 li/li
11 /ul js: 1 // num和num1为当前所要高亮的li标签的下标2 // num2为记录当前在经过中间那一行时到底是往上边滚动还是往下边滚动的一个变量3 var num num2 0, num1 6;4 setInterval(function () {5 if (num 4) { // 第一行滚动6 if (num1 ! 6) {7 num1 6;8 }9 num ;
10 $(li).eq(num - 1).css(background, red).siblings().css(background, #fff);
11 }
12 if (num 4 num 6) { // 第二行滚动
13 if (num1 3) {
14 num2 ;
15 if (num2 % 2 1) { // 向第三行滚动
16 num 6;
17 num ;
18 $(li).eq(num - 1).css(background, red).siblings().css(background, #fff);
19 return;
20 } else { // 向第一行滚动
21 num 0;
22 num ;
23 $(li).eq(num - 1).css(background, red).siblings().css(background, #fff);
24 return;
25 }
26 }
27 $(li).eq(num1 - 1).css(background, red).siblings().css(background, #fff);
28 num1--;
29 }
30 if (num 6) { // 第三行滚动
31 num ;
32 $(li).eq(num - 1).css(background, red).siblings().css(background, #fff);
33 if (num 8) {
34 num1 6;
35 num 4;
36 }
37 }
38 }, 100); 这是我当时脑海里想到的第一种方法这种方法在想的时候比较好想但是在写代码的时候会发现很头疼虽然仅仅只有三个数字变量但是他们之间紧密联系一旦一个变量出现问题那么滚动的轨迹都会出现问题相对第二种方法来说比较烧脑 后来我就琢磨着有没有更好的方法来解决这个烧脑的问题。脑子一转机灵一动呵呵哒突然想到了数组能不能用数组将要显示的高亮方块的轨迹放到数组中然后通过遍历数组让其高亮显示所以第二种方法就诞生了。
方法二通过遍历提前写好的数组轨迹来实现滚动效果代码如下 1 var arr [0, 1, 2, 5, 4, 3, 6, 7, 8, 5, 4, 3]; // 定义运动轨迹数组
2 var num; // 定义当前遍历的数组下标
3 setInterval(function () {
4 if (num arr.length - 1) {
5 num 0;
6 }
7 $(li).eq(arr[num]).css(background, red).siblings().css(background, #fff);
8 num ;
9 }, 200) 结果当然是可以的仅仅就用了几行代码就能搞定也许会有很多大牛会有更方便、更简洁的方法来实现此功能。
总结通过这个小小的案例 让我感觉我们在做开发的过程中都可能会遇到很多烧脑的问题但是当我们在朝另外的方向走走也许就会有更好、更便捷的方法来实现自己所需的功能。
更多专业前端知识请上
【猿2048】www.mk2048.com
