집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트로 구현된 원활한 스크롤 효과 위아래

자바스크립트로 구현된 원활한 스크롤 효과 위아래

高洛峰원래의: 2017-01-18 13:41:401312검색

이 기사의 예에서는 자바스크립트를 통해 달성되는 위아래 원활한 스크롤 효과를 설명합니다. 참고용으로 공유해 드리며, 자세한 내용은 다음과 같습니다.

이전 JS의 좌우 심리스 스크롤 효과를 소개해드렸다면, 이번에는 심리스 업, 다운 스크롤 효과를 해보겠습니다. 나머지 코드는 왼쪽, 오른쪽과 비슷하지만 offsetTop의 값이 변경되고 ul의 전체 너비를 계산할 필요가 없습니다.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>无缝滚动——上下</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  li{list-style:none;}
  img{border:0;}
  #scroll{width:178px;margin:50px auto;position:relative;}
  .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;}
  .up{background:url(images/up.gif);}
  .down{background:url(images/down.gif);}
  .content{margin:10px 0;height:440px;overflow:hidden;position:relative;}
  .content ul{position:absolute;top:0;left:0;}
  .content li{height:110px;}
  </style>
</head>
<body>
  <div id="scroll">
    <a href="javascript:;" id="up" class="btn up"></a>
    <div>
      <ul>
        <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li>
        <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li>
        <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li>
        <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li>
      </ul>
    </div>
    <a class="btn down" href="javascript:;" id="down"></a>
  </div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.getElementById(&#39;scroll&#39;);
  var btnUp = document.getElementById(&#39;up&#39;);
  var btnDown = document.getElementById(&#39;down&#39;);
  var oUl = oDiv.getElementsByTagName(&#39;ul&#39;)[0];
  var timer = null;
  var speed = -1;
  oUl.innerHTML += oUl.innerHTML;
  setTimeout(move,1500);
  btnUp.onclick = function(){
    clearInterval(timer);
    speed = -1;
    move();
  };
  btnDown.onclick = function(){
    clearInterval(timer);
    speed = 1;
    move();
  };
  oUl.onmouseover = function(){
    clearInterval(timer);
  };
  oUl.onmouseout = function(){
    move();
  };
  function move(){
    timer = setInterval(function(){
      oUl.style.top = oUl.offsetTop + speed + &#39;px&#39;;
      if(oUl.offsetTop <= - oUl.offsetHeight / 2){
        oUl.style.top = &#39;0&#39;;
      }else if(oUl.offsetTop >= 0){
        oUl.style.top = - oUl.offsetHeight / 2 + &#39;px&#39;;
      };
    },30);
  };
};
</script>

이동 속도를 변경하려면 속도 값을 수정하면 됩니다. 초기 기본값은 위로 이동하는 것입니다. 즉, 속도는 음수입니다.

이 글이 JavaScript 프로그래밍에 종사하는 모든 분들께 도움이 되기를 바랍니다.

자바스크립트로 구현한 끊김 없는 위아래 스크롤 효과에 대한 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!

성명：

이전 기사：자바스크립트로 구현된 왼쪽 및 오른쪽 원활한 스크롤 효과다음 기사：자바스크립트로 구현된 왼쪽 및 오른쪽 원활한 스크롤 효과

자바스크립트로 구현된 원활한 스크롤 효과 위아래

관련 기사