标签：
前端时间有个做也卖弄滚动公告的需求,开始偷懒百度了下，发现大多数人都是用 marquee 标签来实现，的确，用这个标签，简单，快捷，不用操心，直接在marquee标签里边塞你要滚动的内容就可以了，
但是在测浏览器兼容性的时候，就发现了一个小小的瑕疵，
1、在滚动的时候，速度是没有办法控制成一样的。
2、marquee实现的滚动条是在每次滚动完了之后在再循环，无法做到首部和尾部滚动链接，中间没有空位
所以完了之后，想用js 来重写一次公告，大体实现了下，做起来还是不难的。
用marquee表签来写可以用其属性来控制：主要属性有一下：
一个简单的滚动条测试：
<div style="width:500px">
<marquee>
<span>测试1</span>
<span>测试2</span>
<span>测试3</span>
<span>测试4</span>
<span>测试5</span>
</marquee>
</div>
再给一个原生js写的例子：
<div id="container"> <div class="tipsContainer" > <div id="tipscontainer1" class="fl"> <div class="tips ellipsis">测试1</div> <div class="tips ellipsis">测试2</div> <div class="tips ellipsis">测试3</div> <div class="tips ellipsis">测试4</div> <div class="tips ellipsis">测试5</div> </div> <div id="tipscontainer2" class="fl"> </div> </div> </div>
<style type="text/css">
#container{
width:500px;
height:50px;
background: #ccc;
overflow-x: scroll;
overflow-y: hidden;
}
.tipsContainer{
width:1000px;
height: 50px;
float:left;
}
.tips{
width:100px;
float:left;
background: #eee;
height:50px;
line-height: 50px;
}
.ellipsis{
white-space:nowrap;/*强制文本在一行内显示*/
text-overflow:ellipsis; /*溢出省略号，支持ie、safari（webkit）*/
-o-text-overflow:ellipsis; /*溢出省略号，支持opera*/
overflow:hidden;/*溢出隐藏*/
-moz-binding:url(‘ellipsis.xml#ellipsis‘);
}
.fl{
float:left;
}
</style>
js部分代码：
1 <script type="text/javascript"> 2 window.onload=function(){ 3 document.getElementById("tipscontainer2").innerHTML=document.getElementById("tipscontainer1").innerHTML; 4 start=setInterval(moveLeft,10); 5 var container=document.getElementById("container"); 6 container.onmouseover=function(){ 7 clearInterval(start); 8 } 9 container.onmouseout=function(){ 10 start=setInterval(moveLeft,10); 11 } 12 } 13 function moveLeft(){ 14 var scrollLeft=document.getElementById(‘container‘).scrollLeft++; 15 if(scrollLeft==document.getElementById("container").offsetWidth){ 16 document.getElementById(‘container‘).scrollLeft=0; 17 } 18 } 19 20 </script>
主要思路就是：
在一个大的div#container里 加一个小的div#tipscontainer1,复制div#tipscontainer1的内容到div#tipscontainer2中，
让div#container的width固定，也就是滚动区域是固定宽度的，让其中的内容overflow：hidden，这样就可以隐藏滚动区域的内容，
另外在一个小的div里放一个大的div在里面，就会有溢出，我们将溢出内容设置成hidden，这样在container中就会出现滚动条,我们通过js控制滚动条让其滚动，这样就可以实现一行公告内容的滚动了。
左右滚动我们设置scrollLeft属性
上线滚动我们设置scrolltop属性
然后用setInteval来定时运行，就可以动态滚动公告内容啦~
标签：
原文地址：http://www.cnblogs.com/wangshiping/p/4919970.html
