无缝滚动的制作

一.标签 marquee
属性：
1.滚动方向direction（包括4个值：up、 down、 left和 right）
2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）
4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）
5.滚动循环loop（默认值是-1，滚动会不断的循环下去）
6.滚动范围width、height
7.滚动背景颜色bgcolor
8.空白空间hspace、vspace
常用事件：
οnmοuseοver=“this.stop（）”；
οnmοuseοut=“this.start（）”；
二、js 无缝滚动
原理：（以向上滚动为例）克隆一个相同的内容，紧贴着原内容区域向上滚动以实现消除空白区域，当原内容完全滚出区域时，回到原始位置继续滚动。

知识点：innerHTML，scrollTop，offsetHeight元素显示的高度，scrollHeight总共滚动高度；setInterval（），clearInterval（）

1.简单布局
html：

<div  id="marqBox">
    <ul id="con1">
        <li><a href="#">1.学会html5 </a><span>2013-09-18</span></li>
        <li><a href="#">2.tab页面切换效果</a><span>2013-10-09</span></li>
        <li><a href="#">3.按钮制作</a><span>2013-10-21</span></li>
        <li><a href="#">4.HTML+CSS基础课程</a><span>2013-11-01</span></li>
        <li><a href="#">5.分页页码制作</a><span>2013-11-06</span></li>
        <li><a href="#">6.导航条菜单的制作</a><span>2013-11-08</span></li>
        <li><a href="#">7.信息列表制作</a><span>2013-11-15</span></li>
        <li><a href="#">8.下拉菜单制作</a><span>2013-11-22</span></li>
        <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
    </ul>
    <ul id="con2">   //用于克隆
    </ul>
</div>

css样式：

<style>
body {
    font-size: 12px;
    line-height: 24px;
    text-algin: center;        /* 页面内容居中 */
}
* {
    margin: 0px;
    padding: 0px;            /*  去掉所有标签的marign和padding的值  */
}
ul {
    list-style: none;           /*  去掉ul标签默认的点样式  */
}
a {
    color: #333;
    text-decoration: none;     /* 超链接样式 */
}
a:hover {
    color: #ff0000;
}
#marqBox {
    height: 144px;
    width: 335px;
    margin-left: 25px;
    margin-top: 10px;
    overflow: hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
#marq ul li {
    height: 24px;
}
#marq ul li a {
    width: 180px;
    float: left;
    display: block;
    overflow: hidden;
    text-indent: 15px;
    height: 24px;
}
#marq ul li span {
    float: right;
    color: #999;
}

2 . js实现克隆与滚动
首先，将原滚动内容尾部实现克隆，弥补滚动空白
其次，设置定时器进行滚动，当原滚动内容刚好滚出区域时，置回原位

<script>
        var area = document.getElementById('marqBox');
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');
        con2.innerHTML = con1.innerHTML;
        area.scrollTop = 0;
        var timer=50;  //定时器间隔时长
        function scrollUp(){
        if(area.scrollTop>=area.scrollHeight/2){
            area.scrollTop = 0;    //判断原内容彻底滚出区域时，恢复原位
        }
        else{
            area.scrollTop++;
        }

    };
    setInterval('scrollUp()',timer);

3 . 鼠标悬停事件
注意：移除鼠标时要先关闭定时器再开启，避免重复绑定

    var myScroll=setInterval('scrollUp()',timer);
    area.onmouseover=function(){
        clearInterval(myScroll);
    }
    area.onmouseout=function(){
        clearInterval(myScroll);
        myScroll=setInterval('scrollUp()',timer);
    }

4，间歇性滚动
首先，在滚动函数中判断“当卷出高度等于li行高的整数倍时，停止定时器，并延迟2秒再开始滚动”
其次，新开始滚动的函数中坐标加一，并需要重新开启定时器；

var myScroll=setInterval('scrollUp()',timer);
var LiHeight=24;
function scrollUp(){
    if(area.scrollTop>=area.scrollHeight/2){
            area.scrollTop = 0;
    }
    else{
        area.scrollTop++;
        if(area.scrollTop%LiHeight==0){
        clearInterval(myScroll);
        setTimeout("starMove()",2000);}
    }
};
function starMove(){
    area.scrollTop++;
    myScroll=setInterval('scrollUp()',timer);
}

4，间歇性滚动加入鼠标监听事件

function scrollUp(){
        if(area.scrollTop>=area.scrollHeight/2){
            area.scrollTop = 0;
        }
        else {
            area.scrollTop++;
            if (area.scrollTop % LiHeight == 0) {

                clearInterval(myScroll);
                var timeoutProcess=setTimeout("starMove()", 2000);
                area.addEventListener("mouseover",stopGoal);//监听停顿时的鼠标移入事件
                function stopGoal()
                {
                    clearTimeout(timeoutProcess);
                }
            }
        }
    };

完整代码：

<script >
    var area = document.getElementById('moocBox');
    var con1 = document.getElementById('con1');
    var con2 = document.getElementById('con2');
    con2.innerHTML = con1.innerHTML;
    area.scrollTop = 0;
    var timer=50;  //定时器间隔时长
    var myScroll=setInterval('scrollUp()',timer);
    var LiHeight=24;
    area.onmouseover=function(){
        clearInterval(myScroll);
    }
    area.onmouseout=function(){
        clearInterval(myScroll);
        myScroll=setInterval('scrollUp()',timer);
    }
    function scrollUp(){
        if(area.scrollTop>=area.scrollHeight/2){
            area.scrollTop = 0;
        }
        else {
            area.scrollTop++;
            if (area.scrollTop % LiHeight == 0) {

                clearInterval(myScroll);
                var timeoutProcess=setTimeout("starMove()", 2000);
                area.addEventListener("mouseover",stopGoal);
                function stopGoal()
                {
                    clearTimeout(timeoutProcess);
                }
            }
        }
    };
    function starMove(){
        clearInterval(myScroll);
        area.scrollTop++;
        myScroll=setInterval('scrollUp()',timer);
    }
</script>