一些 小 demo 整合起来发到一起吧
图片懒加载的 demo
- 可以监听 scroll 事件 比较
ele.getBoundingClientRect().top
和document.documentElement.clientHeight
- 可以使用 IntersectionObserver 观察 元素是否进入可视窗口
排序算法的demo
函数的节流和 防抖的 demo 详细的分析 可以查看我博客
canvas 的 getImageDate
函数 获取图片的 rgba 的 值 并且改变 rgba 达到图片蒙版的效果
做了三个效果:
- 鼠标滑过 显示 该处的 rgba 的值
- 图片蒙版,每隔 3px 改变一下rgba的值
- 图片颗粒化, 每隔 6px 获取一个像素点,然后 在利用canvas 把这些点 每个半径 3px 画出来就有了 图片的 颗粒化