body{
position: relative;
height: 100%
}
#scroll_div {
/* height:30px; */
overflow: hidden;
white-space: nowrap;
width:100%;
color: #999999;
margin: auto;
margin-left: 10px;
text-align: center;
}
#scroll_begin,#scroll_end {
display: inline;
}
#main-content{
margin-bottom: 150px;
}
<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>
<script>
//文字横向滚动
function ScrollImgLeft(){
var speed=10;//初始化速度 也就是字体的整体滚动速度
var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容
//获取滚动的开头id
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");//获取滚动的结束id
var scroll_div = document.getElementById("scroll_div");//获取整体的开头id
//滚动的是html内部的内容,原生知识!
scroll_end.innerHTML=scroll_begin.innerHTML;
//定义一个方法
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
//鼠标点击这条公告栏的时候,清除上面的方法,让公告栏暂停
scroll_div.onmouseover = function(){
clearInterval(MyMar);
}
//鼠标点击其他地方的时候,公告栏继续运动
scroll_div.onmouseout = function(){
MyMar = setInterval(Marquee,speed);
}
}
ScrollImgLeft();
</script>