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

js文字滚动效果_讲解js滚动条滚动事件,第1张

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.offsetWidthelse{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;}}

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/651715.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-17
下一篇 2022-04-17

发表评论

登录后才能评论

评论列表(0条)

保存