Heim > Web-Frontend > js-Tutorial > So implementieren Sie das Scrollen von Untertiteln in Javascript

So implementieren Sie das Scrollen von Untertiteln in Javascript

藏色散人
Freigeben: 2021-06-18 11:49:27
Original
4642 Leute haben es durchsucht

So implementieren Sie das Scrollen von Untertiteln in Javascript: Erstellen Sie zuerst HTML- und CSS-Dateien, stellen Sie dann den Container auf eine feste Breite ein und blenden Sie den überschüssigen Teil aus. Erstellen Sie schließlich eine JS-Datei und ändern Sie die Position über einen Timer.

So implementieren Sie das Scrollen von Untertiteln in Javascript

Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wie implementiert man das Scrollen von Untertiteln in Javascript?

Native js implementiert das Scrollen von Untertiteln

Verwenden Sie CSS und natives js, um einen Untertitel-Scroll-Effekt und eine nahtlose Verbindung zu erzielen

Der Container legt eine feste Breite fest und Das überschüssige Teilblenden, der Scrolling -Teil ist absolut positioniert und die Position wird durch den Timer

realized

So implementieren Sie das Scrollen von Untertiteln in Javascripthtml Teil

<p class="scroll">
    <span>这里是要现实的滚动内容......</span>
 </p>
Nach dem Login kopieren

css Teil

.scroll {
  width: 400px;
  height: 23px;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 40px;
  position: relative;
}
.scroll > span {
  position: absolute;
}
Nach dem Login kopieren

    js Teil
  • // 字幕滚动变量
    var scrollTime = null
    var LEN = 400 // 一个完整滚动条的长度
    var x = 0
    // 启动滚动定时器
    function roll () {
      console.log(&#39;启动&#39;)
      var tag1 = document.querySelector(&#39;.scroll>span&#39;)
      var tag2 = tag1.nextSibling
      var fun = function () {
        tag1.style.left = x + &#39;px&#39;
        tag2.style.left = (x + LEN) + &#39;px&#39;
        x = x - 5
        if ((x + LEN) === 0) {
          x = 0
        }
      }
      if (scrollTime) {
        clearInterval(scrollTime)
      }
      scrollTime = setInterval(fun, 300)
    }
    // 绑定鼠标事件
    function bindMouseEvent () {
      var el = document.querySelector(&#39;.scroll>span&#39;)
      var el2 = el.cloneNode(true)
      LEN = el.clientWidth + 100 // 动态修改滚动条的长度,避免文字过多重叠
      el2.style.left = (x + LEN) + &#39;px&#39;
      el.parentElement.appendChild(el2)
      el.addEventListener(&#39;mouseenter&#39;, function (e) {
        clearInterval(scrollTime)
      })
      el.addEventListener(&#39;mouseleave&#39;, function (e) {
        roll()
      })
    }
    Nach dem Login kopieren
    Recomped Lernen: "
      "
    • "
    • " geändert: "
    " Javascript-Tutorial für Fortgeschrittene
      "

    Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Scrollen von Untertiteln in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage