欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript无缝滚动

程序员文章站 2022-04-19 13:13:09
...
知识点

现在这个标签不主张使用,因为不符合w3c标准(结构、样式、行为)功能性分离。

1.behavior滚动的方式

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

【scroll】:表示由一端滚动到另一端,会重复

【slide】:表示由一端滚动到另一端,不会重复

2.direction滚动的方向 【down】、【up】、【left】、【right】

3.loop滚动的次数(当loop=-1表示一直滚动下棋,默认为-1)

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

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

 

用javascript实现

html

css

/*  中间样式 */
#moocBox {
    height: 144px;
    width: 335px;
    margin-left: 25px;
    margin-top: 10px;
    overflow: hidden;    /*  这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */
}

javascript

var area = document.getElementById('moocBox');
      var con1 = document.getElementById('con1');  
      var speed = 50;
      area.scrollTop = 0;    
      con1.innerHTML += con1.innerHTML;     
      function scrollUp() {       
          if (area.scrollTop >= con1.scrollHeight/2) {
              area.scrollTop = 0;
          } else {
              area.scrollTop++;
          }
      }
      var myScroll = setInterval("scrollUp()", speed);
      area.onmouseover = function () {
          clearInterval(myScroll);
      }
      area.onmouseout = function () {
          myScroll = setInterval("scrollUp()", speed);
      }
相关标签: javascript无缝滚动