Js实现⽂字⽔平滚动
公司项⽬中有⼀个公告栏，写的时候我先想到了⽤marquee，于是发现了marquee有很多弊端，当⽂字全部显⽰完才出现新的⽂字，这样不是很友好，然后⼀查发现marquee这个标签已经被W3C标准废弃了，也就是不再⽀持使⽤这个标签了，于是我便⽤js+css去替代这个写法，并且做到类似⽆缝滚动的效果。直接上代码：
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>
</div>
<div id="scroll_end"></div>
</div>
css代码:
#scroll_div {
height: 30px;
line-height: 30px;
overflow: hidden;
white-space: nowrap;
width: 800px;
background-color: #23527c;
color: #d8d8d8;
margin: 1rem 0;
text-align: center;
}
#scroll_begin,#scroll_end {
display: inline;
}
.pad_right {
margin-left: 100px;
marquee marquee}
js代码:
//⽂字横向滚动
function ScrollImgLeft(){
var speed = 40;//初始化速度也就是字体的整体滚动速度
var MyMar = null;//初始化⼀个变量为空⽤来存放获取到的⽂本内容
var scroll_begin = ElementById("scroll_begin");//获取滚动的开头id
var scroll_end = ElementById("scroll_end");//获取滚动的结束id
var scroll_div = ElementById("scroll_div");//获取整体的开头id
scroll_end.innerHTML=scroll_begin.innerHTML;//滚动的是html内部的内容，原⽣知识!
//定义⼀个⽅法
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth;
else
scroll_div.scrollLeft++;
}
MyMar=setInterval(Marquee,speed);//给上⾯的⽅法设置时间  setInterval
//⿏标滑⼊这条公告栏的时候，清除上⾯的⽅法，让公告栏暂停
useover = function(){
clearInterval(MyMar);
}
//⿏标滑出这条公告栏的时候，公告栏继续移动
useout = function(){
MyMar = setInterval(Marquee,speed);
}
}
ScrollImgLeft();
效果截图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。