移动端原生纯js文字向左无缝滚动marquee特效
手机页面移动端,需求是文字向左无缝滚动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; } }
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!