讲解js滚动条滚动事件 js文字滚动效果

文章插图
手机页面移动端，需求是文字向左无缝滚动marquee特效，用了几个都不行，达不到需求效果，有小bug ，最后用了下面的这个原生纯js文字向左无缝滚动marquee特效，我测试了没有问题，可以正常使用它，原生纯js代码少，实用性强，具体看下代码。
1.先看效果演示：
2.原生纯js代码如下：
var speed=10; //数字越大文字滚动速度越慢
var tab=document.getElementById(“demo”);
var tab1=document.getElementById(“demo1”);
var tab2=document.getElementById(“demo2”);
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
var onOff = true;
var Time = setInterval(Chang,3000);
function Chang(){
if(onOff){
oFig.style.marginLeft=’-100%’;
onOff = false;
}else{
oFig.style.marginLeft=’0′;
onOff = true;
}
}

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：