Javascriptで字幕スクロールを実装する方法

JavaScript で字幕スクロールを実装する方法: 最初に HTML と CSS ファイルを作成し、次にコンテナーを固定幅に設定して余分な部分を非表示にし、最後に js ファイルを作成し、タイマーによって位置を変更します。

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript で字幕スクロールを実装するにはどうすればよいですか?

ネイティブ js で字幕スクロールを実現

#css とネイティブ js を使って字幕スクロールを実現効果、シームレスな接続

効果

原理

コンテナは固定幅に設定され、余分な部分は非表示になります。 、スクロール部分は絶対に配置され、タイマーを通じて位置を変更します

realize

htmlパート

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

cssパート

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

js パート

• // 字幕滚动变量
  var scrollTime = null
  var LEN = 400 // 一个完整滚动条的长度
  var x = 0
  // 启动滚动定时器
  function roll () {
    console.log('启动')
    var tag1 = document.querySelector('.scroll>span')
    var tag2 = tag1.nextSibling
    var fun = function () {
      tag1.style.left = x + 'px'
      tag2.style.left = (x + LEN) + 'px'
      x = x - 5
      if ((x + LEN) === 0) {
        x = 0
      }
    }
    if (scrollTime) {
      clearInterval(scrollTime)
    }
    scrollTime = setInterval(fun, 300)
  }
  // 绑定鼠标事件
  function bindMouseEvent () {
    var el = document.querySelector('.scroll>span')
    var el2 = el.cloneNode(true)
    LEN = el.clientWidth + 100 // 动态修改滚动条的长度，避免文字过多重叠
    el2.style.left = (x + LEN) + 'px'
    el.parentElement.appendChild(el2)
    el.addEventListener('mouseenter', function (e) {
      clearInterval(scrollTime)
    })
    el.addEventListener('mouseleave', function (e) {
      roll()
    })
  }

推奨学習: 「

javascript Advanced Tutorial」

以上がJavascriptで字幕スクロールを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。