Javascript에서 자막 스크롤을 구현하는 방법

Javascript에서 자막 스크롤을 구현하는 방법: 먼저 HTML 및 CSS 파일을 만든 다음 컨테이너를 고정 너비로 ​​설정하고 초과 부분을 숨깁니다. 마지막으로 js 파일을 만들고 타이머를 통해 위치를 변경합니다.

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

Javascript에서 자막 스크롤을 구현하는 방법은 무엇입니까?

Native js에서 자막 스크롤 구현

자막 스크롤 효과는 CSS와 Native js를 사용하여 원활하게 구현됩니다

Effect

Principle

컨테이너는 고정 너비를 설정하고 남는 부분 숨기기, 스크롤 부분은 절대 위치 지정하고 타이머를 통해 위치 변경

realized

• html part

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

• css part

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

• js part

// 字幕滚动变量
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에서 자막 스크롤을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!