国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

win10日歷交互效果(進(jìn)階)

skinner / 1557人閱讀

摘要：日歷可視移動高亮范圍本篇文章在前一個初級的基礎(chǔ)上進(jìn)行后續(xù)的體驗(yàn)優(yōu)化目標(biāo)效果鼠標(biāo)在目標(biāo)元素內(nèi)進(jìn)行移動，個塊組成的圓形高亮?xí)S之移動實(shí)現(xiàn)效果圖原圖進(jìn)階實(shí)現(xiàn)圖技術(shù)點(diǎn)初級篇使用的漸變范圍寫法進(jìn)階篇使用的漸變范圍寫法第一種寫法是不考慮高光范圍移動

win10日歷可視移動高亮范圍 
本篇文章在前一個初級的基礎(chǔ)上進(jìn)行后續(xù)的體驗(yàn)優(yōu)化
目標(biāo)效果

鼠標(biāo)在目標(biāo)元素內(nèi)進(jìn)行移動，9個塊組成的圓形高亮?xí)S之移動

實(shí)現(xiàn)效果圖

1.win10原圖

2.進(jìn)階實(shí)現(xiàn)圖

技術(shù)點(diǎn)

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

進(jìn)階篇使用的漸變范圍寫法：radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);

第一種寫法是不考慮高光范圍移動，通過九個中心點(diǎn)組合實(shí)現(xiàn)，簡單

第二種方法使用具體的原點(diǎn)定位漸變的中心，通過js計算動態(tài)修改，通過九個中心點(diǎn)組合實(shí)現(xiàn)

解釋一點(diǎn)：兩種方法都是通過給九個元素設(shè)置不同的漸變原點(diǎn)，但思想不同

第一種是九個點(diǎn)拼成一個圓，即中心圓有九個

第二種是一個圓涵蓋九個塊，但中心圓只有一個，再計算九個點(diǎn)距離圓心的距離得到初始的漸變原點(diǎn)

圖解：

方法一，九個紅點(diǎn)就是九個塊的漸變中心（右下，中下，坐下，右中，不設(shè)置漸變，左中，右上，中上，左上）

方法二，中心的綠點(diǎn)就是圓心，坐標(biāo)(63,63),九個黃點(diǎn)就是每個塊的零點(diǎn)，算出黃點(diǎn)相對綠點(diǎn)的坐標(biāo)
[

(63,63),
(21,63),
(-21,63),
(63,21),
不設(shè)置漸變
(-21,63),
(63,-21),
(21,-21),
(-21,-21),

]
3.兩種方法都有一個中心塊不設(shè)置漸變色，純背景色就可以

使用第二種方法，目的不是為了得到另一種實(shí)現(xiàn)方式，是因?yàn)樵趯?shí)現(xiàn)鼠標(biāo)移動時，動態(tài)移動高光范圍，方法一很難計算移動的趨向和值，因?yàn)樯婕暗骄艂€圓的圓心位置；而使用方法二，只要關(guān)心一個圓就行，及中心的圓，再通過中間值計算出對應(yīng)九個塊的位置。
計算核心

根據(jù)我的實(shí)現(xiàn)過程，移動的計算規(guī)則是這樣的：
計算倍數(shù)公式：中心原點(diǎn)/n+移動差值 = 樣式表中固定的位置
n算出來的結(jié)果就是在js中寫入的每個塊的改變倍數(shù)即

1.5就是計算出來的n
原點(diǎ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,九個塊拼成一個大正方形，內(nèi)切圓就是我們應(yīng)該實(shí)現(xiàn)的高光，中心原點(diǎn)坐標(biāo)(63,63),則第一個塊的漸變中心就出來了

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

鼠標(biāo)移動獲取事件對象坐標(biāo)a,獲取當(dāng)前鼠標(biāo)所處的塊的位置b,差值就是b-a-21,減21是因?yàn)槲覀兪前凑罩虚g值計算的，因?yàn)閳A在正中間，即變化范圍的中間值，差值的變化范圍是0-42,一個小正方形的邊長，所以要減21

只要計算出變化的規(guī)律，直接操作dom改變就好了，記住mousemove事件同樣需要移除一遍類名

代碼

相關(guān)代碼點(diǎn)擊這里查看吧

進(jìn)階源代碼 其他

這個就是完整版的實(shí)現(xiàn)，講得不好，沒懂的可以看源碼，再不懂就評論吧

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99510.html

相關(guān)文章

  • win10日歷交互效果

    win10日歷 早就想試著實(shí)現(xiàn)以下win10日歷的動態(tài)css效果，現(xiàn)在終于有時間試試?yán)病１酒恼轮皇菍?shí)現(xiàn)簡單的效果，進(jìn)階篇后續(xù)會放上來 目標(biāo)效果 鼠標(biāo)移入目標(biāo)元素，周圍相關(guān)八塊元素點(diǎn)亮，點(diǎn)亮高光范圍呈圓形 點(diǎn)擊元素選中，呈藍(lán)色色塊 實(shí)現(xiàn)效果圖 1.win10原圖showImg(https://segmentfault.com/img/bVbkdE9?w=364&h=499);2.初級實(shí)現(xiàn)圖sh...

    MonoLog 評論0 收藏0

  • win10日歷交互效果

    win10日歷 早就想試著實(shí)現(xiàn)以下win10日歷的動態(tài)css效果，現(xiàn)在終于有時間試試?yán)病１酒恼轮皇菍?shí)現(xiàn)簡單的效果，進(jìn)階篇后續(xù)會放上來 目標(biāo)效果 鼠標(biāo)移入目標(biāo)元素，周圍相關(guān)八塊元素點(diǎn)亮，點(diǎn)亮高光范圍呈圓形 點(diǎn)擊元素選中，呈藍(lán)色色塊 實(shí)現(xiàn)效果圖 1.win10原圖showImg(https://segmentfault.com/img/bVbkdE9?w=364&h=499);2.初級實(shí)現(xiàn)圖sh...

    cncoder 評論0 收藏0

  • 第三章 基本數(shù)據(jù)類型-time庫認(rèn)識

    摘要：任務(wù)獲取當(dāng)前時間并按以下格式輸出。快捷鍵運(yùn)行窗口輸入回車輸入回車，進(jìn)入盤的根目錄，可使用回車查看根目錄下的文件輸入其中為剛才保存的文件名，如回車，即可執(zhí)行。 任務(wù) ...

    techstay 評論0 收藏0

發(fā)表評論

0條評論

skinner

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<