javascript seamless scrolling

Knowledge Points

The use of this tag is not recommended now because it does not comply with the w3c standard (structure, style, behavior) functional separation.

1. Behavior scrolling method

[alternate]: means scrolling back and forth between the two ends

[scroll]: means scrolling from one end to the other, it will repeat

[slide]: means scrolling from one end to the other One end will not be repeated

2.direction scrolling direction [down], [up], [left], [right]

3.loop scrolling times (when loop=-1 means always scrolling to play chess, the default is -1)

4.scrollamount sets the scrolling speed of active subtitles

5.scrolldelay sets the delay time between scrolling of active subtitles twice

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

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