The following is an example of JS's practical line-by-line text loop rolling effect:
JS practical row-by-row text scrolling with pauses
Welcome to the practical line-by-line text scrolling Effect
A pause occurred while rolling one row to another.
I hope everyone will like it and feel very concise code.
Script window. onload = function () {new Marquee ("scrollBox2", // container ID
0, // scroll up (0 up 1 down 2 to left 3 to right)
2, // scroll step
200, // container visible width
64, // visible height of the container
50, // The smaller the timer value, the faster the scrolling speed (1000 = 1 second, we recommend not less than 20)
2000, // intermittent pause time (0 indicates no pause, 1000 = 1 second)
1000, // The wait time at the start (0 is not waiting, 1000 = 1 second)
// Interval between intermittent scrolling (optional)
) ;}; Function Marquee () {this. ID = document. getElementById (arguments [0]); this. direction = arguments [1]; this. step = arguments [2]; this. width = arguments [3]; this. height = arguments [4]; this. timer = arguments [5]; this. waitTime = arguments [6]; this. stopTime = arguments [7]; if (arguments [8]) {this. scrollStep = arguments [8];} else {this. scrollStep = this. direction> 1? This. width: this. height;} this. CTL = this. startID = this. stop = this. mouseOver = 0; this. ID. style. overflowX = this. ID. style. overflowY = "hidden"; this. ID. noWrap = true; this. ID. style. width = this. width; this. ID. style. height = this. height; this. clientScroll = this. direction> 1? This. ID. scrollWidth: this. ID. scrollHeight; this. ID. innerHTML + = this. ID. innerHTML; this. start (this, this. timer, this. waitTime, this. stopTime);} Marquee. prototype. start = function (msobj, timer, waittime, stoptime) {msobj. startID = function () {msobj. scroll ();} msobj. continue = function () {if (msobj. mouseOver = 1) {setTimeout (msobj. continue, waittime);} else {clearInterval (msobj. timerID); msobj. CTL = msobj. stop = 0; msobj. timerID = setInterval (msobj. startID, timer) ;}} msobj. pause = function () {msobj. stop = 1; clearInterval (msobj. timerID); setTimeout (msobj. continue, waittime);} msobj. begin = function () {msobj. timerID = setInterval (msobj. startID, timer); msobj. ID. onmouseover = function () {msobj. mouseOver = 1; clearInterval (msobj. timerID);} msobj. ID. onmouseout = function () {msobj. mouseOver = 0; if (msobj. stop = 0) {clearInterval (msobj. timerID); msobj. timerID = setInterval (msobj. startID, timer) ;}} setTimeout (msobj. begin, stoptime);} Marquee. prototype. scroll = function () {switch (this. direction) {case 0: this. CTL + = this. step; if (this. CTL> = this. scrollStep & this. waitTime> 0) {this. ID. scrollTop + = this. scrollStep + this. step-this.CTL; this. pause (); return;} else {if (this. ID. scrollTop> = this. clientScroll) this. ID. scrollTop-= this. clientScroll; this. ID. scrollTop + = this. step;} break; case 1: this. CTL + = this. step; if (this. CTL> = this. scrollStep & this. waitTime> 0) {this. ID. scrollTop-= this. scrollStep + this. step-this.CTL; this. pause (); return;} else {if (this. ID. scrollTop <= 0) this. ID. scrollTop + = this. clientScroll; this. ID. scrollTop-= this. step;} break; case 2: this. CTL + = this. step; if (this. CTL> = this. scrollStep & this. waitTime> 0) {this. ID. scrollLeft + = this. scrollStep + this. step-this.CTL; this. pause (); return;} else {if (this. ID. scrollLeft> = this. clientScroll) this. ID. scrollLeft-= this. clientScroll; this. ID. scrollLeft + = this. step;} break; case 3: this. CTL + = this. step; if (this. CTL> = this. scrollStep & this. waitTime> 0) {this. ID. scrollLeft-= this. scrollStep + this. step-this.CTL; this. pause (); return;} else {if (this. ID. scrollLeft <= 0) this. ID. scrollLeft + = this. clientScroll; this. ID. scrollLeft-= this. step;} break;} script