js实现文字滚动 html文字滚动效果

文章插图

文章插图
手机页面移动端，需求是文字向左无缝滚动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;
}
【js实现文字滚动 html文字滚动效果】}