win10日曆可視移動高亮範圍

本篇文章在前一個初級的基礎上進行後續的體驗優化

目標效果

1. 滑鼠在目標元素內進行移動，9個塊組成的圓形高亮會隨之移動

實現效果圖

1.win10原圖

2.進階實現圖

技術點

1. 初級篇使用的漸變範圍寫法：radial-gradient(42px at right bottom, #3c3c3c, #1a1a1a);

2. 進階篇使用的漸變範圍寫法：radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);

   • 第一種寫法是不考慮高光範圍移動，通過九個中心點組合實現，簡單
   • 第二種方法使用具體的原點定位漸變的中心，通過js計算動態修改，通過九個中心點組合實現

3. 解釋一點：兩種方法都是通過給九個元素設定不同的漸變原點，但思想不同

   • 第一種是九個點拼成一個圓，即中心圓有九個
   • 第二種是一個圓涵蓋九個塊，但中心圓只有一個，再計算九個點距離圓心的距離得到初始的漸變原點

圖解：

方法一，九個紅點就是九個塊的漸變中心（右下，中下，坐下，右中，不設定漸變，左中，右上，中上，左上）

方法二，中心的綠點就是圓心，座標(63,63),九個黃點就是每個塊的零點，算出黃點相對綠點的座標
[

(63,63),
(21,63),
(-21,63),
(63,21),
不設定漸變
(-21,63),
(63,-21),
(21,-21),
(-21,-21),

]
3.兩種方法都有一箇中心塊不設定漸變色，純背景色就可以

使用第二種方法，目的不是為了得到另一種實現方式，是因為在實現滑鼠移動時，動態移動高光範圍，方法一很難計算移動的趨向和值，因為涉及到九個圓的圓心位置；而使用方法二，只要關心一個圓就行，及中心的圓，再通過中間值計算出對應九個塊的位置。

計算核心

根據我的實現過程，移動的計算規則是這樣的：
計算倍數公式：中心原點/n+移動差值 = 樣式表中固定的位置
n算出來的結果就是在js中寫入的每個塊的改變倍數即

1.5就是計算出來的n
原點---origin 移動差值---num
radial-gradient(${originX}px at ${originX/1.5+numX}px ${originY/1.5+numY}px, #3c3c3c, #1a1a1a)
 

是怎麼算出來不同的n？

1. 不考慮動態js改變，先使用css寫出固定的畫素,以第一個塊為例：
   小塊邊框是42px,九個塊拼成一個大正方形，內切圓就是我們應該實現的高光，中心原點座標(63,63),則第一個塊的漸變中心就出來了

   background-image: radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);

2. 滑鼠移動獲取事件物件座標a,獲取當前滑鼠所處的塊的位置b,差值就是b-a-21,減21是因為我們是按照中間值計算的，因為圓在正中間，即變化範圍的中間值，差值的變化範圍是0-42,一個小正方形的邊長，所以要減21
3. 只要計算出變化的規律，直接操作dom改變就好了，記住mousemove事件同樣需要移除一遍類名

程式碼

相關程式碼點選這裡檢視吧

進階原始碼

其他

這個就是完整版的實現，講得不好，沒懂得可以看原始碼，再不懂就評論吧