javascript无缝滚动-js教程-PHP中文网

javascript无缝滚动

高洛峰

发布： 2016-10-12 16:48:09

原创

1187人浏览过

知识点

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

1.behavior滚动的方式

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

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

立即学习“Java免费学习笔记（深入）”；

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

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

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

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

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

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

 <marquee loop="-1" onmouseover="this.stop();" onmouseout="this.start();"></marquee>

登录后复制

用javascript实现

html

<div  id="moocBox">
    <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>     
    </ul>   
</div>

登录后复制

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);
      }

登录后复制