The Marqueen in HTML also enables scrolling of content, but scrolling is intermittent, and a blank space appears during the scrolling cycle. If the rolling area is larger, the appearance of space will make the page look very beautiful. The use of JavaScript can make this problem change, to achieve non-stop scrolling.
Scroll code up and down loop：
Copy Code code as follows:
<div id= "Demo" onmouseover= "Clearinterval (inter)" onmouseout= "Inter=setinterval (qswhmarquee,30)" style= " Overflow:hidden; height:60px ">
<div id= "Demo1" >
111111111111111<br>
222222222222222<br>
333333333333333<br>
444444444444444<br>
555555555555555
</div>
<div id= "Demo2" ></div>
</div>
<script>
var T=getid ("Demo"), T1=getid ("Demo1"), T2=getid ("Demo2"), Sh=getid ("show");
var Inter;
t2.innerhtml=t1.innerhtml;
function Qswhmarquee () {
if (t2.offsettop<=t.scrolltop)
T.scrolltop-=t1.offsetheight;
Else
t.scrolltop++;
}
Inter=setinterval (qswhmarquee,30);
function GetID (ID) {
return document.getElementById (ID);
}
</script>
Scroll code around text：
Copy Code code as follows:
<style type= "Text/css" media= "All" >
. d1{
margin:10px Auto;
width:200px;
Background-color: #CCCCCC;
height:20px;
Overflow:hidden;
White-space:nowrap;
}
. d2{
margin:0px Auto;
Background-color: #FF9933;
}
. div2{
Width:auto;
height:20px;
font-size:12px;
}
</style>
<script language= "javascript" type= "Text/javascript" >
var s,s2,s3,s4,timer,i=0;
function init () {
S=getid ("Div1");
S2=getid ("Div2");
S3=getid ("Div3");
S4=getid ("Div4");
s4.innerhtml=s3.innerhtml;
s2.style.width=s.offsetwidth+ "px";
s2.style.height=s.offsetheight+ "px";
Timer=setinterval (mar,30)
}
function Mar () {
S2.innerhtml=s.scrollleft;
if (s3.offsetwidth<=s.scrollleft) {
S.scrollleft-=s3.offsetwidth;
}else{s.scrollleft++;}
}
function GetID (ID) {
return document.getElementById (ID);
}
Window.onload=init;
</script>
<div class= "D1" id= "Div1" >
<span class= "Div2" id= "Div3" > Yuzhiguo website design Studio to provide professional foreign trade website construction Station services. </span>
<span id= "Div4" class= "Div2" ></span>
</div>
<div class= "D2" id= "Div2" ></div>
