實現效果

用 JavaScript 和 CSS3 實現拖動滑塊時,實時調整圖片的內邊距、模糊度、背景顏色,同時標題中 JS 兩字的顏色也隨圖片背景顏色而變化。
涉及特性
:root
-
var(--xxx)
:CSS 變量(CSS Variables) filter: blur()
- 事件
change
、mousemove
過程指南
CSS 部分準備
- 聲明全局(
:root
)的 CSS 變量 - 將變量應用到頁面中對應元素
<img>
- 處理標題的 CSS 值
JS 實時更新 CSS 值
- 獲取頁面中
input
元素 - 給每個
input
添加監聽事件,使其在值變動,觸發更新操作 - 同 2 ,添加鼠標滑過是的事件監聽
- 編寫處理更新操作的方法
- 獲取參數值后綴
- 獲取參數名(blur、spacing、color)
- 獲取參數值(12px、#efefef)
- 賦值給對應的 CSS 變量
基礎知識
NodeList 和 Array 的區別
可以打開 proto 查看它的方法,其中有forEach()
、item()
、keys()
等。而 Array 的 prototype 中有map()
、pop()
等數組才有的方法。HTML5 中的自定義數據屬性
dataset
HTML5 中可以為元素添加非標準的自定義屬性,只需要加上data-
前綴,可以隨便添加和命名。添加之后,可以通過元素的dataset
屬性來訪問這些值,dataset
的值是 DOMStringMap 的一個實例化對象,其中包含之前所設定的自定義屬性的“名-值”對。CSS variable
這是一個 CSS3 的新特性,IE 和 Edge 目前都還不支持。命名寫法是--變量名
,在引用這個變量時寫法是var(--變量名)
。具體實例見下一條代碼。-
:root
偽類
這個偽元素匹配的是文檔的根元素,也就是<html>
標簽。所以常用于聲明全局的 CSS 變量:
:root { --base: #ffc600; --blur: 10px; --padding: 10px; }
在使用時:
img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); }
CSS 濾鏡 filter
CSS 的濾鏡提供了一些圖形特效,比如高斯模糊、銳化、變色等。它帶有一些預設的函數,在使用時加上參數調用這些函數即可。在 Chrome、Firefox 中都支持。
解決難點
-
如何處理參數值(一個有 px 、另一個沒有)
運用dataset
儲存后綴,有 px 后綴的標簽中設置<input data-sizing: px>
:<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px"> <input type="color" name="base" value="#8aa8af">
JS 中通過
dataset.sizing
來獲取后綴值:const suffix = this.dataset.sizing || '';
此時
suffix
獲取到的值,針對顏色為空,而針對長度類的則為 'px'。 -
如何用 JavaScript 改變 CSS 屬性值?
在 JavaScript 中document.documentElement
即代表文檔根元素。所以要改變全局的 CSS 變量,可以這樣寫:document.documentElement.style.setProperty('--base', '#fff');
系列目錄
JavaScript30 - 三十天純JS挑戰 中文指南
01 JavaScript Dump Kit 中文指南
02 純 JavaScript+CSS 時鐘指南
03 用 CSS 變量實現拖動控制 CSS 參數