JS-信息滚动效果

<marquee>标签实现信息滚动
1. behavior滚动的方式
   alternate：表示在两端之间来回滚动
   scroll：表示由一端滚动到另一端，会重复
   slide：表示由一端滚动到另一端，不会重复
2. direction滚动的方向down、up、left、right
3. loop滚动的次数(当loop=-1表示一直滚动下去，默认为-1)

4. scrollamount设定活动字幕的滚动速度

5. scrolldelay设定活动字幕滚动两次之间的延迟时间

文字信息无缝滚动

无缝滚动：当内容滚完之后，不想让它停止，也不让它空白。
说明：蓝色为显示区域，橘黄色为要滚动的内容
无缝滚动原理：
原始内容为1，克隆内容为2
当原始内容底部到达可视区的底部时，重新克隆出原始内容2,2在紧接在1的后面
当1的内容滚出可视区，2的内容到达可视区的顶部时，此刻就开始了无缝滚动
<script type="text/javascript">
 var area = document.getElementById('moocBox');
 var con1 = document.getElementById('con1');
 var con2 = document.getElementById('con2');
 var speed = 50;
 area.scrollTop = 0;
 con2.innerHTML = con1.innerHTML;
 function scrollUp(){
	 if(area.scrollTop >= con1.scrollHeight) {
		 area.scrollTop = 0;
		 }else{
		   area.scrollTop ++; 
		 } 
}
var myScroll = setInterval("scrollUp()",speed);
area.onmouseover = function(){
	 clearInterval(myScroll);
	}
area.onmouseout = function(){
	 myScroll = setInterval("scrollUp()",speed);
	}
 </script>

知识点
1、innerHTML
2、scrollTop（向上滚动的数值）
3、offsetHeight（元素自身的高度）
4、setInterval()（执行的方法）
5、clearInterval()（清除执行的方法）
添加鼠标悬停事件：
  onmouseover --> clearInterval
  onmouseout --> setInterval

间接性滚动原理

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

area.innerHTML+=area.innerHTML完成克隆
<script type="text/javascript">
 var area =document.getElementById('moocBox');
 var iLiHeight = 24;
 area.innerHTML+=area.innerHTML;
 area.scrollTop = 0;
 var speed= 30;
 var delay = 1000;
 var time ;
 function startMove()
 {
    area.scrollTop++;
    time = setInterval("scrollUp()",speed);
 }
 function scrollUp()
 {
 	//area.scrollTop++;
    if (area.scrollTop%iLiHeight ==0) 
    {
       clearInterval(time);
       setTimeout("startMove()",delay);
    }else{
    	area.scrollTop++;
    	if(area.scrollTop>=area.scrollHight/2){
    		area.scrollTop=0;
    	}
    }
 }
 setTimeout("startMove()",delay);//初始化
 </script>

间歇循环滚动
1、设置需要滚动的行高：
    var h = lineHeight * n;
2、当滚动高度整除行高时，停止滚动：
    if(scrollTop % h == 0) clearInterval(...);
     等待m秒后再滚动：
    setTimeout("scrollTop++; setInterval(...)", delay);
3、当内容已滚动出可视区时，重置scrollTop：
    if(scrollTop >= scrollHeight) scrollTop = 0;
4、初始调用一次setTimeout，以开始运动