win10日曆交互效果(進階)

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. 解釋一點：兩種方法都是經過給九個元素設置不一樣的漸變原點，但思想不一樣

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

圖解：

1. 

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

1. 

方法二，中心的綠點就是圓心，座標(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事件一樣須要移除一遍類名

代碼

相關代碼點擊這裏查看吧

進階源代碼

其餘

這個就是完整版的實現，講得很差，沒懂的能夠看源碼，再不懂就評論吧