這是我在github 上發(fā)現(xiàn)的一個(gè)原生js挑戰(zhàn)項(xiàng)目拾稳，由于是js小白雾棺，希望通過這次的項(xiàng)目加深對js的理解
第三天的挑戰(zhàn)是運(yùn)用js實(shí)現(xiàn)圖片的變化,圖片會隨滾動條的變化而變化。
效果圖如下(變色功能由于軟件的原因，沒有展示)
Day3效果圖
js部分
const input = document.querySelectorAll(".controls input");
console.log(input);
function handleUpdate(){
const suffix = this.dataset.sizing ||"";
console.log(suffix);
console.log(`--${this.id}`);
document.documentElement.style.setProperty(`--${this.id}`,this.value+suffix);
}
input.forEach(key => key.addEventListener("change",handleUpdate));
input.forEach(key => key.addEventListener("mousemove",handleUpdate));
dataset可以看張鑫旭大神的博客 ,這是html5自定義屬性
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
如果有一個(gè)屬性 data-height,我們可以用dataset.height去獲取拂盯，
document.documentElement.style.setProperty是去給圖片的對應(yīng)屬性賦值
CSS部分
:root{
--base: #ffc600;
--blur:10px;
--spacing:10px;
}
img{
padding:var(--spacing);
background:var(--base);
filter:blur(var(--blur));
}
- :root 偽類
這個(gè)偽元素匹配的是文檔的根元素，也就是 <html> 標(biāo)簽鲫尊，常用于聲明全局的 CSS 變量
在使用的時(shí)候
:root{
--base: #ffc600;
}
img{
background:var(--base);//用var()包含起來
}
*濾鏡filter
可以參考filter,這次使用有的是blur()模糊化煤辨。
以上就是我在day3中學(xué)到的知識，這里我同樣參考了soyaine的中文指南诀拭，感謝
