前幾天朋友去面試，面試官要求當(dāng)場(chǎng)用九宮格寫出一個(gè)滾動(dòng)有規(guī)律的大轉(zhuǎn)盤滾動(dòng)高亮效果，結(jié)果可想而知。如下圖：

　　也就是說當(dāng)頁面剛進(jìn)來的時(shí)候，紅色方塊在左上角，接下來按照?qǐng)D上所標(biāo)注的箭頭方向來依次循環(huán)。當(dāng)我聽說了這個(gè)面試題之后，我就利用空余時(shí)間寫了一下此效果，結(jié)果研究了兩種方法：

方法一：首先我想到的是，既然要滾動(dòng)，那么當(dāng)然要運(yùn)用到定時(shí)器，后來我就想既然要實(shí)現(xiàn)這個(gè)軌跡重復(fù)的循環(huán)下去，那么就要用到一些數(shù)字變量，代碼如下

結(jié)構(gòu)：

1 <ul> 2 <li></li> 3 <li></li> 4 <li></li> 5 <li></li> 6 <li></li> 7 <li></li> 8 <li></li> 9 <li></li> 10 <li></li> 11 </ul>

js:

1 // num和num1為當(dāng)前所要高亮的li標(biāo)簽的下標(biāo)， 2 // num2為記錄當(dāng)前在經(jīng)過中間那一行時(shí)到底是往上邊滾動(dòng)還是往下邊滾動(dòng)的一個(gè)變量 3 var num = num2 = 0, num1 = 6; 4 setInterval(function () { 5 if (num < 4) {　　// 第一行滾動(dòng) 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) {　　// 第二行滾動(dòng) 13 if (num1 <= 3) { 14 num2 ; 15 if (num2 % 2 == 1) { // 向第三行滾動(dòng) 16 num = 6; 17 num ; 18 $("li").eq(num - 1).css("background", "red").siblings().css("background", "#fff"); 19 return; 20 } else {　　// 向第一行滾動(dòng) 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) { // 第三行滾動(dòng) 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);

　　這是我當(dāng)時(shí)腦海里想到的第一種方法，這種方法在想的時(shí)候比較好想，但是在寫代碼的時(shí)候會(huì)發(fā)現(xiàn)很頭疼，雖然僅僅只有三個(gè)數(shù)字變量，但是他們之間緊密聯(lián)系，一旦一個(gè)變量出現(xiàn)問題，那么滾動(dòng)的軌跡都會(huì)出現(xiàn)問題，相對(duì)第二種方法來說比較燒腦！

　　后來我就琢磨著有沒有更好的方法來解決這個(gè)燒腦的問題。腦子一轉(zhuǎn)，機(jī)靈一動(dòng)，呵呵噠，突然想到了數(shù)組，能不能用數(shù)組將要顯示的高亮方塊的軌跡放到數(shù)組中，然后通過遍歷數(shù)組，讓其高亮顯示，所以第二種方法就誕生了。

方法二：通過遍歷提前寫好的數(shù)組軌跡，來實(shí)現(xiàn)滾動(dòng)效果，代碼如下：

1 var arr = [0, 1, 2, 5, 4, 3, 6, 7, 8, 5, 4, 3]; // 定義運(yùn)動(dòng)軌跡數(shù)組 2 var num; // 定義當(dāng)前遍歷的數(shù)組下標(biāo) 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)

　　結(jié)果當(dāng)然是可以的，僅僅就用了幾行代碼就能搞定（也許會(huì)有很多大牛會(huì)有更方便、更簡(jiǎn)潔的方法來實(shí)現(xiàn)此功能）。

總結(jié)：通過這個(gè)小小的案例 ，讓我感覺我們?cè)谧鲩_發(fā)的過程中，都可能會(huì)遇到很多燒腦的問題，但是當(dāng)我們?cè)诔硗獾姆较蜃咦?#xff0c;也許就會(huì)有更好、更便捷的方法來實(shí)現(xiàn)自己所需的功能。

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的九宫格有规律高亮滚动效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。