JavaScript implements long image scrolling effect

This article shares the specific code of JavaScript long picture scrolling for your reference. The specific content is as follows

The scrolling of long images will involve a timer:

Let's review the timer first:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Timer Review</title>
</head>
<body>
    <button id="start">Start</button>
    <button id="stop">Close</button>
    <script type="text/javascript">
        var start = document.getElementById("start");
        var stop = document.getElementById("stop");
        var num = 0,timer = null;

        start.onclick = function (){
            // When using a timer, clear the original timer first and then turn it on. You can try commenting out the clearInterval(timer); below and then click the turn on button multiple times to compare the effects. clearInterval(timer);
            timer = setInterval(function (){
                num++;
                console.log(num);
            },1000)
        }
        stop.onclick = function (){
            clearInterval(timer);
        }
    </script>
</body>
</html>

After reviewing the timer content, let's look at the code for long image scrolling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Long picture scrolling effect</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
   background-color: #000;
  }
        #box{
   width: 658px;
   height: 400px;
   border: 1px solid #ff6700;
   margin: 100px auto;
   overflow: hidden;
   position: relative;
  }
        #box img{
   position: absolute;
   top: 0;
   left: 0;
  }
        #box span{
            position: absolute;
            width: 100%;
            height: 50%;
            left: 0;
            cursor: pointer;
        }
        #box #top{
   top: 0;
  }
  #box #bottom{
   bottom: 0;
  }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/timer.jpeg" alt="">
        <span id="top"></span>
        <span id="bottom"></span>
    </div>
    <script type="text/javascript">
        // 1. Get the event source var box = document.getElementById('box');
  var pic = document.getElementsByTagName('img')[0];
  var divTop = document.getElementById('top');
  var divBottom = document.getElementById('bottom');

        // 2. Add event var num = 0, timer = null;
        divBottom.onmouseover = function () {
            // Clear the previous acceleration effect clearInterval(timer);
   // Let the picture scroll down timer = setInterval(function () {
     num -= 10;
     // This -3666 is adjusted according to the picture if (num >= -3666) {
     pic.style.top = num + 'px';
    }else{
     clearInterval(timer);
    }
   },50);
  }
  divTop.onmouseover = function () {
   clearInterval(timer);
   // Let the picture scroll up timer = setInterval(function () {
     num += 10;
    if(num <= 0){
     pic.style.top = num + 'px';
    }else{
     clearInterval(timer);
    }
   },100);
  }
  // Stop scrolling when the mouse moves away box.onmouseout = function () {
   clearInterval(timer);
  }
    </script>
</body>
</html>

I won’t put the effect picture here, you can try it yourself if you need it (remember to find the long picture)

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: