JS-信息滚动效果

落日映苍穹つ 2022-06-09 21:27 272阅读 0赞

<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，以开始运动