Comment implémenter le défilement des sous-titres en Javascript

Comment implémenter le défilement des sous-titres en Javascript : créez d'abord des fichiers HTML et CSS ; puis définissez le conteneur sur une largeur fixe et masquez la partie en excès, enfin, créez un fichier js et modifiez la position via une minuterie.

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

Comment implémenter le défilement des sous-titres en Javascript ?

Js natif pour implémenter le défilement des sous-titres

Utilisez CSS et JS natif pour implémenter les sous-titres Effet de défilement, connexion transparente

Effet

Principe

Le conteneur est réglé sur une largeur fixe, la partie excédentaire est cachée, et la partie défilante est positionnée de manière absolue Et changez la position via la minuterie

pour obtenir la

• partie html

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

• partie css

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

• partie 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()
  })
}

Apprentissage recommandé : "tutoriel avancé javascript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!