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

标题: 前端-张悕可- 20230522 [打印本页]

作者: 小胖 时间: 2023-5-24 17:37
标题: 前端-张悕可- 20230522
client系列：
clientWidth，clientHeigth 包括content和padding
clientTop，clientLeft 返回边框的宽度

scroll系列：
console.log(box.scrollWidth)
console.log(box.scrollHeight)
content  + padding
如果内容超出了容器的高度，得到的scrollHeight就是内容的真实高度
scrollTop 头部卷去的部分

页面被卷去的部分：
window.pageYoffset

动画函数：
// el表示需要执行动画的元素对象
// target表示动画的结束位置
// 增加一个回调函数(callback)

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/)