滚动公告

前端时间有个做也卖弄滚动公告的需求,开始偷懒百度了下，发现大多数人都是用 marquee 标签来实现，的确，用这个标签，简单，快捷，不用操心，直接在marquee标签里边塞你要滚动的内容就可以了，

但是在测浏览器兼容性的时候，就发现了一个小小的瑕疵，

1、在滚动的时候，速度是没有办法控制成一样的。

2、marquee实现的滚动条是在每次滚动完了之后在再循环，无法做到首部和尾部滚动链接，中间没有空位

所以完了之后，想用js 来重写一次公告，大体实现了下，做起来还是不难的。

用marquee表签来写可以用其属性来控制：主要属性有一下：

• direction:表示滚动方向， 值可以是left，right，up，down，默认为left
• behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
• loop表示循环的次数，值是正整数，默认为无限循环
• scrollamount表示运动速度，值是正整数，默认为6
• scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒
• align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
• bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
• height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度
• hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
• onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

一个简单的滚动条测试：

<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来定时运行，就可以动态滚动公告内容啦~