一.今日所学
鼠标事件：mouseenter mouseleave
两种鼠标的区别 ：mouseover 存在事件冒泡 mouseenter 不存在事件冒泡
client事件：clientWidth，clientHeight 包括: content + padding
clientLeft 边框的宽度-左边框
scroll事件：scrollWidth，scrollHeight包含content + padding
如果内容超出了容器的高度，得到的scrollHeight就是内容的真实高度
scrollTop 头部卷去的部分
动画的实现思路：
目的：
知识点的总结应用
函数的封装的应用
动画库的封装 - 写一个函数（实现一个简单的动画）
原理 : 元素本身的偏移量的基础上加1
const div = document.querySelector('div')
setInterval(function () {
div.style.left = div.offsetLeft + 1 + 'px'
}, 30)
动画的实现代码
const div = document.querySelector('div')
let t1 = setInterval(() => {
div.style.left = div.offsetLeft + 1 + 'px'
if (div.offsetLeft >= 500) {
// alert('over')
// 停止定时器
clearInterval(t1)
}
}, 15)
动画简单封装
function animate(el, target) {
let t1 = setInterval(() => {
el.style.left = el.offsetLeft + 1 + 'px'
if (el.offsetLeft >= target) {
clearInterval(t1)
}
}, 15)
}
使用animate进行封装
缓动动画
function animate(el, target, cb) {
clearInterval(el.t1)
el.t1 = setInterval(() => {
let step = (target - el.offsetLeft) / 10
console.log(step)
if (step > 0) {
step = Math.ceil(step)
} else {
step = Math.floor(step)
}
el.style.left = el.offsetLeft + step + 'px'
if (el.offsetLeft == target) {
clearInterval(el.t1)
if (cb) {
cb()
}
}
}, 30)
} |
|
