Beispiele zur Erläuterung, wie js horizontale und vertikale Scroll-Animationen von Dom-Elementen implementiert-js-Tutorial-php.cn

Beispiele zur Erläuterung, wie js horizontale und vertikale Scroll-Animationen von Dom-Elementen implementiert

藏色散人

Freigeben： 2022-08-07 09:37:04

nach vorne

2733 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie horizontale und vertikale Scroll-Animationen von DOM-Elementen in js implementieren. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Die durch settimeout implementierte Scroll-Animation unterstützt wiederholtes Klicken, um schneller zu werden.

Unterstützt horizontales Scrollen und vertikales Scrollen. Durch schnelles Klicken wird die Entfernung überlagert, die beim letzten Mal nicht gescrollt wurde unverändert, die Scrollgeschwindigkeit wird schneller

So verwenden Sie

1 Kopieren Sie den Code unten;

2 Exportieren Sie die entsprechende Methode movingColumn - vertikales Scrollen moving--Horizontales Scrollen <code>movingColumn - 竖直滚动 moving--水平滚动

3、函数接收3个参数 dom: 要滑动的元素 space: 点击一次要滚动的距离 istop/isLeft 是否向上/左滚动

功能修改

const hz = 60 在规定时间分几次滚动到目标位置 60是人肉眼可识别的刷新率

每次滚动的时间为 settime里的1ms * hz = 60ms

3. Die Funktion empfängt 3 Parameter dom: das zu verschiebende Element space: die Entfernung, um die gescrollt werden soll, wenn einmal darauf geklickt wird istop/isLeft Ob nach oben/links gescrollt werden soll

Funktionsänderung

const hz = 60 Scrollen Sie innerhalb der angegebenen Zeit mehrmals zur Zielposition 60. Dies ist eine Bildwiederholfrequenz, die vom menschlichen Auge erkannt werden kann
🎜🎜Die Zeit jeder Bildlauf beträgt

settime1ms * hz = 60ms in /code> 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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) =&gt; {

  // 用户快速点击 则把上次未滚动的距离与本次滚动结合再一起
  if (timer &amp;&amp; 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(() =&gt; {
    dom.scrollTop = position + i * toltalSpace / hz
    ++i
    if (i &gt;= 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) =&gt; {

  // 用户快速点击 则把上次未滚动的距离与本次滚动结合再一起
  if (timer &amp;&amp; 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(() =&gt; {
    dom.scrollLeft = position + i * toltalSpace / hz
    ++i
    if (i &gt;= hz) {
      clearInterval(timer)
      timer = null
      dom.scrollLeft = TargetLocation // 位置修正
      toltalSpace = 0
      TargetLocation = -1
    }
  }, 1)
}

export {
  moving,
  movingColumn
}</pre><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Verwandte Empfehlungen: [🎜JavaScript-Video-Tutorial🎜] 🎜🎜🎜

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung, wie js horizontale und vertikale Scroll-Animationen von Dom-Elementen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!