无缝滚动的制作

一.标签 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
常用事件：
onmouseover=“this.stop（）”；
onmouseout=“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>