Nahtloses Scrollen mit Javascript

Wissenspunkte

Die Verwendung dieses Tags wird nicht empfohlen, da es nicht der funktionalen Trennung der W3C-Standards (Struktur, Stil, Verhalten) entspricht.

1. Verhaltens-Scroll-Methode

[alternativ]: bedeutet, zwischen den beiden Enden hin und her zu scrollen

[scrollen]: bedeutet, von einem Ende zum anderen zu scrollen wiederholt

[gleiten]: Zeigt das Scrollen von einem Ende zum anderen an, ohne es zu wiederholen

2.Richtung Die Richtung des Scrollens [nach unten], [oben], [links], [rechts]

3. Die Anzahl der Loop-Scrolls (wenn Loop=-1 bedeutet, dass immer gescrollt wird, um Schach zu spielen, ist der Standardwert -1)

4.scrollamount legt die Scroll-Geschwindigkeit aktiver Untertitel fest

5 .scrolldelay legt die Verzögerungszeit zwischen dem Scrollen aktiver Untertitel fest

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

Verwendung von Javascript zur Implementierung von

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