資訊專欄INFORMATION COLUMN
摘要：日歷可視移動高亮范圍本篇文章在前一個初級的基礎上進行后續(xù)的體驗優(yōu)化目標效果鼠標在目標元素內進行移動，個塊組成的圓形高亮會隨之移動實現(xiàn)效果圖原圖進階實現(xiàn)圖技術點初級篇使用的漸變范圍寫法進階篇使用的漸變范圍寫法第一種寫法是不考慮高光范圍移動
win10日歷可視移動高亮范圍
本篇文章在前一個初級的基礎上進行后續(xù)的體驗優(yōu)化目標效果
鼠標在目標元素內進行移動，9個塊組成的圓形高亮會隨之移動
實現(xiàn)效果圖1.win10原圖
2.進階實現(xiàn)圖
初級篇使用的漸變范圍寫法：radial-gradient(42px at right bottom, #3c3c3c, #1a1a1a);
進階篇使用的漸變范圍寫法：radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);
第一種寫法是不考慮高光范圍移動，通過九個中心點組合實現(xiàn)，簡單
第二種方法使用具體的原點定位漸變的中心，通過js計算動態(tài)修改，通過九個中心點組合實現(xiàn)
解釋一點：兩種方法都是通過給九個元素設置不同的漸變原點，但思想不同
第一種是九個點拼成一個圓，即中心圓有九個
第二種是一個圓涵蓋九個塊，但中心圓只有一個，再計算九個點距離圓心的距離得到初始的漸變原點
圖解：
方法一，九個紅點就是九個塊的漸變中心（右下，中下，坐下，右中，不設置漸變，左中，右上，中上，左上）
方法二，中心的綠點就是圓心，坐標(63,63),九個黃點就是每個塊的零點，算出黃點相對綠點的坐標
[
(63,63), (21,63), (-21,63), (63,21), 不設置漸變 (-21,63), (63,-21), (21,-21), (-21,-21),
]
3.兩種方法都有一個中心塊不設置漸變色，純背景色就可以
使用第二種方法，目的不是為了得到另一種實現(xiàn)方式，是因為在實現(xiàn)鼠標移動時，動態(tài)移動高光范圍，方法一很難計算移動的趨向和值，因為涉及到九個圓的圓心位置；而使用方法二，只要關心一個圓就行，及中心的圓，再通過中間值計算出對應九個塊的位置。計算核心
根據我的實現(xiàn)過程，移動的計算規(guī)則是這樣的：
計算倍數(shù)公式：中心原點/n+移動差值 = 樣式表中固定的位置
n算出來的結果就是在js中寫入的每個塊的改變倍數(shù)即
1.5就是計算出來的n
原點---origin 移動差值---num
radial-gradient(${originX}px at ${originX/1.5+numX}px ${originY/1.5+numY}px, #3c3c3c, #1a1a1a)
是怎么算出來不同的n？
不考慮動態(tài)js改變，先使用css寫出固定的像素,以第一個塊為例：
小塊邊框是42px,九個塊拼成一個大正方形，內切圓就是我們應該實現(xiàn)的高光，中心原點坐標(63,63),則第一個塊的漸變中心就出來了
background-image: radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);
鼠標移動獲取事件對象坐標a,獲取當前鼠標所處的塊的位置b,差值就是b-a-21,減21是因為我們是按照中間值計算的，因為圓在正中間，即變化范圍的中間值，差值的變化范圍是0-42,一個小正方形的邊長，所以要減21
只要計算出變化的規(guī)律，直接操作dom改變就好了，記住mousemove事件同樣需要移除一遍類名
代碼相關代碼點擊這里查看吧
進階源代碼 其他這個就是完整版的實現(xiàn)，講得不好，沒懂的可以看源碼，再不懂就評論吧
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/99510.html
win10日歷 早就想試著實現(xiàn)以下win10日歷的動態(tài)css效果，現(xiàn)在終于有時間試試啦。本篇文章只是實現(xiàn)簡單的效果，進階篇后續(xù)會放上來 目標效果 鼠標移入目標元素，周圍相關八塊元素點亮，點亮高光范圍呈圓形 點擊元素選中，呈藍色色塊 實現(xiàn)效果圖 1.win10原圖showImg(https://segmentfault.com/img/bVbkdE9?w=364&h=499);2.初級實現(xiàn)圖sh...
win10日歷 早就想試著實現(xiàn)以下win10日歷的動態(tài)css效果，現(xiàn)在終于有時間試試啦。本篇文章只是實現(xiàn)簡單的效果，進階篇后續(xù)會放上來 目標效果 鼠標移入目標元素，周圍相關八塊元素點亮，點亮高光范圍呈圓形 點擊元素選中，呈藍色色塊 實現(xiàn)效果圖 1.win10原圖showImg(https://segmentfault.com/img/bVbkdE9?w=364&h=499);2.初級實現(xiàn)圖sh...
摘要：任務獲取當前時間并按以下格式輸出。快捷鍵運行窗口輸入回車輸入回車，進入盤的根目錄，可使用回車查看根目錄下的文件輸入其中為剛才保存的文件名，如回車，即可執(zhí)行。 任務 ...
閱讀 930·2019-08-30 15:54
閱讀 3412·2019-08-29 15:33
閱讀 2797·2019-08-29 13:48
閱讀 1421·2019-08-26 18:26
閱讀 3443·2019-08-26 13:55
閱讀 1692·2019-08-26 10:45
閱讀 1253·2019-08-26 10:19
閱讀 383·2019-08-26 10:16
