javascript Implementation of Seamless Up and Down Scrolling Effect

This article describes the implementation of the vertical seamless scrolling effect using JavaScript. Shared for everyone's reference, as follows:

This section introduces the seamless horizontal scrolling effect using JavaScript. Now let's create the seamless vertical scrolling effect. The other code is similar to the horizontal one, but the value of offsetTop needs to be changed, and the total width of ul does not need to be calculated anymore.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Seamless Scrolling - Vertical</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 class="content">
      <ul>
        <li><a href="#" title="[#0#]"><img src="images/1.jpg" alt="[#0#]" width="178" height="108"/></a></li>
        <li><a href="#" title="[#1#]"><img src="images/2.jpg" alt="[#1#]" width="178" height="108"/></a></li>
        <li><a href="#" title="[#2#]"><img src="images/3.jpg" alt="[#2#]" width="178" height="108"/></a></li>
        <li><a href="#" title="[#3#]"><img src="images/4.jpg" alt="[#3#]" 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('scroll');
  var btnUp = document.getElementById('up');
  var btnDown = document.getElementById('down');
  var oUl = oDiv.getElementsByTagName('ul')[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 + 'px';
      if(oUl.offsetTop <= - oUl.offsetHeight / 2{
        oUl.style.top = '0';
      }else if(oUl.offsetTop >= 0){
        oUl.style.top = - oUl.offsetHeight / 2 + 'px';
      };
    },30);
  };
};
</script>

If you want to change the speed of movement, just modify the value of speed, the default is moving up, that is, the speed is a negative number.

Readers who are interested in more about JavaScript-related content can check out the site's special topics: 'Summary of JavaScript Switch Effects and Techniques', 'Summary of JavaScript Search Algorithm Techniques', 'Summary of JavaScript Animation Effects and Techniques', 'Summary of JavaScript Error and Debugging Techniques', 'Summary of JavaScript Data Structures and Algorithm Techniques', 'Summary of JavaScript Traversal Algorithm and Techniques', and 'Summary of JavaScript Mathematical Operation Usage'.

I hope the content described in this article will be helpful to everyone's JavaScript program design.

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, does not edit manually, nor does it bear relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)

Basic Tutorial