菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-2023-5-22-张静博 [打印本页]

作者: JBZ 时间: 2023-5-24 17:43
标题: 前端-2023-5-22-张静博

一.今日所学

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

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)