<marquee>

1   behavior 滚动方式

        alternate 表示在两端之间来回滚动

        scroll：表示由一端滚动到另一端，会重复

        slide:表示由一端滚动到另一端，不会重复

2    direction 滚动的方向 down up left right

3    loop 滚动的次数 （当loop = -1表示一直滚动下去，默认为-1）

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

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

<marquee onmouseover = "this.stop();"  onmouseout = "this.start();" >设置鼠标移动样式，鼠标停留，停止滚动

鼠标移入移出的效果

<script type="text/javascript">
 var area = document.getElementById('moocBox');
 var liHeight = 48; //li高度，可自定义改变每次滚动距离
 var time,
   time2,
   speed=20,//滚动速度
   delay=2000;//滚动延迟

 area.innerHTML += area.innerHTML;
 area.scrollTop = 0;

 function startMove(){
   //保证scrollTop不为0，否则满足area.scrollTop % liHeight == 0，使函数停止
   area.scrollTop++;
   time = setInterval(scrollUp, speed);
 }

 function scrollUp() {
     if (area.scrollTop % liHeight == 0) {
         clearInterval(time);
         time2=setTimeout(startMove,delay);
     }else{
area.scrollTop++;
//area.scrollHeight文档的大小
if(area.scrollTop>=area.scrollHeight/2){
   area.scrollTop=0;
}
     }
 }

 setTimeout(startMove,delay);

 area.onmouseover=function(){
   //必须同时清除time和time2，只结束time的话time2依然可以在延时后启动startMove(),使得清除time变得无效
   clearInterval(time);
   clearTimeout(time2);
 }
 area.onmouseout=function(){
   time = setInterval(scrollUp, speed);
 }
 </script>

marquee标签实现信息滚动

<marquee>标签属性

<script> //将定时器、列表行间距声明为全局变量 var timer=null; var lineHeight=24; $(function(){ //当页面加载完后，延迟两秒钟执行startScroll（）函数。 //而不用setInterval(startScroll,50)，否则页面加载完毕后，列表会直接滚动到第二行而人眼无法察觉 setTimeout(startScroll,2000); $("#moocBox ul").clone(true).appendTo("#moocBox");//带行为的克隆 }) function startScroll(){ var top=++$("#moocBox")[0].scrollTop;//先自增后赋值，top值依次为1、2、3....而不xain先赋值后自增，否则永远不滚动 if(top%lineHeight == 0){ setTimeout("startScroll()",2000); }else{ startScroll(); } var ulHeight=$("#moocBox ul")[0].offsetHeight; if(top == ulHeight){ $("#moocBox")[0].scrollTop=0; } } </script>

setTime与setInterval

<script> //取得滚动区域 var area=document.getElementById('moocBox'); var iLiHeight=24;//1个列表高度 area.innerHTML+=area.innerHTML; area.scrollTop=0; function scrollUp(){ area.scrollTop++; //当滚动区域 %一个信息的高度==0时停止滚动 if(area.scrollTop % iLiHeight ==0){ clearInterval(time); } } var time=setInterval("scrollUp()",50); </script>

实现克隆（无缝对接滚动） var area = document.getElementById('moocBox'), con1 = document.getElementById('con1'), con2 = document.getElementById('con2'); // area.scrollTop = 0; con2.innerHTML = con1.innerHTML; function scrollUp(){ if (area.scrollTop >= con1.offsetHeight) { area.scrollTop = 0; }else{ area.scrollTop ++; }; }; var time = 50; var myScroll = setInterval('scrollUp()' , time);

onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

marquee