首頁 > web前端 > js教程 > 主體

實例講解js如何實現dom元素橫向及縱向滾動的動畫

藏色散人
發布: 2022-08-07 09:37:04
轉載
2681 人瀏覽過

這篇文章為大家介紹js如何實現dom元素橫向、縱向滾動的動畫,希望對需要的朋友有幫助!

#透過settimeout實現的捲動動畫,支援重複點擊變快

支援水平滾動和垂直滾動,快速點擊會將上次未滾動完的距離疊加,滾動的時間不變,滾動的速度會變快

使用方式

1、複製下方程式碼;

2、匯出對應的方法movingColumn - 垂直捲動      moving- -水平捲動

3、函數接收3個參數dom: 要滑動的元素  space: 點選一次要捲動的距離 istop/isLeft 是否向上/左捲動

#功能修改

const hz = 60  在規定時間分幾次捲動到目標位置60是人肉眼可辨識的刷新率

#每次捲動的時間為settime裡的1ms * hz  = 60ms

let timer:any = null // 定时器
let TargetLocation = -1 // 上一次点击应该滚动到的目标位置
let toltalSpace = 0 // 本次要滚动的距离

/**
 * @info 竖直滚动
 * @info 滚动动画 hz 刷新率 可以修改滚动的速度
 * @params dom:要滚动的元素; space 要滚动的距离; istop 滚动的方向;
*/
const movingColumn = (dom:HTMLDivElement, space: number, istop:boolean) => {

  // 用户快速点击 则把上次未滚动的距离与本次滚动结合再一起
  if (timer && TargetLocation !== -1) {
    toltalSpace += TargetLocation - dom.scrollTop
    // 计算本次的目标距离
    if(istop) {
      TargetLocation = dom.scrollTop + toltalSpace + space
    } else {
      TargetLocation = dom.scrollTop + toltalSpace - space
    }
  } else if (!timer) {
    toltalSpace = 0
    TargetLocation = -1
  }

  if (istop) {
    toltalSpace -= space
  } else {
    toltalSpace += space
  }

  // 获取本次的目标位置
  const position = dom.scrollTop
  TargetLocation = position + toltalSpace

  clearInterval(timer)
  timer = null
  const hz = 60
  let i = 1
  timer = setInterval(() => {
    dom.scrollTop = position + i * toltalSpace / hz
    ++i
    if (i >= hz) {
      clearInterval(timer)
      timer = null
      dom.scrollTop = TargetLocation // 位置修正
      toltalSpace = 0
      TargetLocation = -1
    }
  }, 1)
}


/**
 * @info 水平滚动
 * @info 滚动动画 hz 刷新率 可以修改滚动的速度
 * @params dom:要滚动的元素; space 要滚动的距离; isLeft 滚动的方向;
*/
const moving = (dom:HTMLDivElement, space: number, isLeft:boolean) => {

  // 用户快速点击 则把上次未滚动的距离与本次滚动结合再一起
  if (timer && TargetLocation !== -1) {
    toltalSpace += TargetLocation - dom.scrollLeft
    // 计算本次的目标距离
    if(isLeft) {
      TargetLocation = dom.scrollLeft + toltalSpace + space
    } else {
      TargetLocation = dom.scrollLeft + toltalSpace - space
    }
  } else if (!timer) {
    toltalSpace = 0
    TargetLocation = -1
  }

  if (isLeft) {
    toltalSpace -= space
  } else {
    toltalSpace += space
  }

  // 获取本次的目标位置
  const position = dom.scrollLeft
  TargetLocation = position + toltalSpace

  clearInterval(timer)
  timer = null
  const hz = 60
  let i = 1
  timer = setInterval(() => {
    dom.scrollLeft = position + i * toltalSpace / hz
    ++i
    if (i >= hz) {
      clearInterval(timer)
      timer = null
      dom.scrollLeft = TargetLocation // 位置修正
      toltalSpace = 0
      TargetLocation = -1
    }
  }, 1)
}

export {
  moving,
  movingColumn
}
登入後複製

相關推薦:【JavaScript影片教學】        

以上是實例講解js如何實現dom元素橫向及縱向滾動的動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!