How to realize subtitle scrolling with Javascript
This article mainly introduces the relevant knowledge of "how to achieve subtitle scrolling in Javascript". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve subtitle scrolling in Javascript" can help you solve the problem.
The method of Javascript to achieve subtitle scrolling: first create HTML and css files; then set the container to set a fixed width and set the excess part to hide; finally, create a js file and change the position through a timer.
This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.
How does Javascript achieve subtitle scrolling?
Use css and native js to achieve subtitle scrolling effect, seamless connection
Effect.
Principle
The container sets a fixed width, hides the excess part, scrolls the part absolutely and changes the position through the timer.
Realize
Html part
Here is the realistic scrolling content.
Css part
White-space {width: 400px; height: 23px; white-space: nowrap; overflow: hidden; margin-left: 40px; position: relative;} .scroll > span {position: absolute;}
Js part
/ / the subtitle scrolling variable var scrollTime = nullvar LEN = 400 / / the length of a full scroll bar var x = 0) / start the scroll timer function roll () {console.log ('start') var tag1 = document.querySelector ('.startup > 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) Bind mouse event function bindMouseEvent () {var el = document.querySelector ('.mouse > span') var el2 = el.cloneNode (true) LEN = el.clientWidth + 100 / / dynamically modify the length of the scroll bar Avoid too much text overlap el2.style.left = (x + LEN) + 'px' el.parentElement.appendChild (el2) el.addEventListener (' mouseenter', function (e) {clearInterval (scrollTime)}) el.addEventListener ('mouseleave', function (e) {roll ()})} on "how to achieve subtitle scrolling" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
