자바스크립트 원활한 스크롤

지식

이 태그는 w3c 표준의 기능 분리(구조, 스타일, 동작)를 준수하지 않으므로 사용을 권장하지 않습니다.

1. 동작 스크롤 방법

[대체]: 양쪽 끝 사이를 앞뒤로 스크롤하는 것을 의미합니다.

[스크롤]: 한쪽 끝에서 다른 쪽 끝으로 스크롤하는 것을 의미합니다. 반복

[슬라이드]: 반복하지 않고 한쪽 끝에서 다른 쪽 끝으로 스크롤함을 나타냅니다.

2.방향 스크롤 방향 [아래], [위], [왼쪽], [오른쪽]

3. 루프 스크롤 수(loop=-1은 체스를 플레이하기 위해 항상 스크롤하는 것을 의미하며 기본값은 -1입니다)

4.scrollamount는 활성 자막의 스크롤 속도를 설정합니다

5 .scrolldelay는 활성 자막 스크롤 사이의 지연 시간을 설정합니다.

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

자바스크립트를 사용하여

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;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}

자바스크립트

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