前端-段童雨-20230522

一.今日所学

鼠标事件：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)
}