在做APP公告滚动的时候用到，感觉还不错，码了
转载地址：/zhangzeshan/article/details/83588979#commentsedit
先看下实现的效果
就是红色箭头部分指向的位置,字体会从右往左进行滚动
接下来看下html代码
<div id="scroll_div" class="fl"><div id="scroll_begin">尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，本平台目前提供的通道带积分，支持大部分银行，欢迎您的使用！</span>尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，本平台目前提供的通道带积分，支持大部分银行，欢迎您的使用！</span>尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，本平台目前提供的通道带积分，支持大部分银行，欢迎您的使用！</span>尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，本平台目前提供的通道带积分，支持大部分银行，欢迎您的使用！</span>尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，本平台目前提供的通道带积分，支持大部分银行，欢迎您的使用！</span>尊敬的用户，您好！<span class="pad_right">感谢您的长期支持，本平台目前提供的通道带积分，支持大部分银行，欢迎您的使用！</span></div><div id="scroll_end"></div></div>
CSS代码:
#scroll_div {height:30px;overflow: hidden;white-space: nowrap;width:100%;background-color: #fff;color: #999999;margin: 1rem 0rem;text-align: center;}#scroll_begin,#scroll_end {display: inline;}
JS代码:
//文字横向滚动function ScrollImgLeft(){var speed=50;//初始化速度 也就是字体的整体滚动速度var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容var scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头idvar scroll_end = document.getElementById("scroll_end");//获取滚动的结束idvar scroll_div = document.getElementById("scroll_div");//获取整体的开头idscroll_end.innerHTML=scroll_begin.innerHTML;//滚动的是html内部的内容,原生知识!//定义一个方法function Marquee(){if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)scroll_div.scrollLeft-=scroll_begin.offsetWidth;elsescroll_div.scrollLeft++;}MyMar=setInterval(Marquee,speed);//给上面的方法设置时间 setInterval//鼠标点击这条公告栏的时候,清除上面的方法,让公告栏暂停scroll_div.onmouseover = function(){clearInterval(MyMar);}//鼠标点击其他地方的时候,公告栏继续运动scroll_div.onmouseout = function(){MyMar = setInterval(Marquee,speed);}}ScrollImgLeft();
