JavaScript30 Day 3
2017-07-26 本文已影响0人
lijianliang
这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解
第三天的挑战是运用js实现图片的变化,图片会随滚动条的变化而变化。
效果图如下(变色功能由于软件的原因，没有展示)
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">
如果有一个属性 data-height,我们可以用dataset.height去获取，
document.documentElement.style.setProperty是去给图片的对应属性赋值
CSS部分
:root{
--base: #ffc600;
--blur:10px;
--spacing:10px;
}
img{
padding:var(--spacing);
background:var(--base);
filter:blur(var(--blur));
}
- :root 伪类
这个伪元素匹配的是文档的根元素，也就是 <html> 标签，常用于声明全局的 CSS 变量
在使用的时候
:root{
--base: #ffc600;
}
img{
background:var(--base);//用var()包含起来
}
*滤镜filter
可以参考filter,这次使用有的是blur()模糊化。
以上就是我在day3中学到的知识，这里我同样参考了soyaine的中文指南，感谢
