前幾天朋友去面試，面試官要求當場用九宮格寫出一個滾動有規律的大轉盤滾動高亮效果，結果可想而知。如下圖：

　　也就是說當頁面剛進來的時候，紅色方塊在左上角，接下來按照圖上所標注的箭頭方向來依次循環。當我聽說了這個面試題之后，我就利用空余時間寫了一下此效果，結果研究了兩種方法：

方法一：首先我想到的是，既然要滾動，那么當然要運用到定時器，后來我就想既然要實現這個軌跡重復的循環下去，那么就要用到一些數字變量，代碼如下

結構：

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為當前所要高亮的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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。