A brief analysis of js text scrolling effect_javascript skills

Whether this effect will be commonly used in future web development or whether it is still favored by designers is not the most important from a technical perspective. Understanding its implementation principle will have a great impact on improving your own front-end technology. Help, everything in the world never changes without its origin. If you master its operating rules, you will not be fooled by its fancy appearance. You can even use relevant technologies to create new effects on the premise of mastering its rules. . Let’s take a look at its implementation process:
1.html

Copy code The code is as follows:

• First line


• Second line


• Third line

2.css

Copy code The code is as follows:

.box{
width:150px;
height:25px;
line-height :25px;
border:#bbb 1px solid;
overflow:hidden;
}
.box ul{margin:0; padding:0}
.box li{
height :25px;
line-height:25px;
font-size:12px;
text-align:center;
list-style-type:none;
}

3.js

Copy code The code is as follows:

function startmarquee(lh,speed,delay,index){
/*
Parameters of function startmarquee:
lh: the distance or height of the text scrolling upward at one time;
speed: scrolling speed;
delay: the time interval for scrolling pauses;
index: the encapsulated function can be applied to different elements on the page;
*/
var t;
var p=false;
var o=document.getElementById("marqueebox" index);
//Get the scroll area object in the document and assign it to variable o;
o.innerHTML =o.innerHTML; //The actual content in the object is I made a copy, which contains two uls. Of course, the li tag also changed from 3 lines to 6 lines; the purpose of copying is to provide a transition for the text to scroll upwards uninterruptedly.
o.onmouseover=function(){p=true}
//The mouse slides over and stops scrolling;
o.onmouseout=function(){p=false}
//The mouse leaves, Start scrolling; whether p is true or false directly affects the execution of the start() function below;
o.scrollTop = 0;
//The distance between the top of the text content and the top of the scroll area, the initial value is 0;
function start(){
t=setInterval(scrolling,speed); //Every once in a while, setInterval will execute the
scrolling function; the larger the speed, the larger the scrolling time interval and the slower the scrolling speed. ;
if(!p){ o.scrollTop = 1;}
//Scrolling stops or starts, depending on the Boolean value passed by p;
}
function scrolling(){
if(o.scrollTop%lh!=0){
//If it is not divisible, that is, the height of one upward movement does not reach lh, the content will continue to scroll upward;
o.scrollTop = 1 ;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
//The content in object o has been copied once before, so its scroll height is actually the original content Double height;
When the content scrolls up to the height of scrollHeight/2, all three lines of text have been displayed once, and the entire content
scrollTop returns to 0; wait for the next round of scrolling to reach the text The effect of continuous upward scrolling;
}else{
clearInterval(t);
//Otherwise clear t and pause scrolling
setTimeout(start,delay);
//After delay interval After that, start start() and continue scrolling
}
}
setTimeout(start,delay);
//Start scrolling for the first time; setTimeout will execute the function start() after a certain period of time , and only executed once
}
//Pass parameters
startmarquee(25,30,3000,0);
//With pause effect
startmarquee(25,40,0,1 );
//Continuously


The following are all codes:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Text scrolls up</title> <style type="text/css"> .box{width:150px; height:25px;line-height:25px; border:#bbb 1px solid; overflow:hidden;} .box ul{margin:0; padding:0} .box li{height:25px; line-height:25px; font-size:12px; text-align:center; list-style-type:none;} </style> <div class="box" id="marqueebox0"> <ul> <li style="background:#f8e2ac;">First line</li> <li style="background:#f5f5f5;">Second line</li> <li style="background:#ffe6ec;">Third line</li> </ul> </div> <div class="box" id="marqueebox1"> <ul> <li style="background:#f8e2ac;">First line</li> <li style="background:#f5f5f5;">Second line</li> <li style="background:#ffe6ec;">Third line</li> </ul> </div>