How to use JavaScript to achieve the effect of dragging up and down images?-JS Tutorial-php.cn

How to use JavaScript to achieve the effect of dragging up and down images?

王林

Release： 2023-10-18 09:09:37

Original

1476 people have browsed it

JavaScript 如何实现图片的上下拖动切换效果？

JavaScript How to achieve the effect of dragging up and down pictures?

With the development of the Internet, pictures play an important role in our lives and work. In order to improve the user experience, we often need to add some special effects or interactive effects to pictures. Among them, the effect of dragging up and down pictures to switch is a very common, simple and practical effect. This article will introduce how to use JavaScript to achieve this effect and provide specific code examples.

First, we need to create an HTML file to display images and achieve dragging effects. The code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #container {
        width: 400px;
        height: 300px;
        position: relative;
        overflow: hidden;
      }
      
      #image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <img id="image" src="image.jpg" alt="Image">
    </div>
    
    <script src="script.js"></script>
  </body>
</html>

Copy after login

In the above code, we created a div with the id "container" to accommodate the image. We set it to relative positioning and set its width, height, and overflow styles to limit the image's display area. We also created an img tag with an id of "image" to display images. We set it to absolute positioning and set its width and height to 100% to ensure that the image fills the parent container.

Next, we need to write JavaScript code to achieve the dragging effect of the image. Create a JavaScript file named script.js and add the following code to the file:

window.onload = function() {
  var container = document.getElementById("container");
  var image = document.getElementById("image");
  
  var isDragging = false;
  var startY = 0;
  var offset = 0;
  
  image.addEventListener("mousedown", function(event) {
    isDragging = true;
    startY = event.clientY;
    offset = image.offsetTop;
  });
  
  window.addEventListener("mouseup", function() {
    isDragging = false;
  });
  
  container.addEventListener("mousemove", function(event) {
    if (!isDragging) return;
    
    var mouseY = event.clientY;
    var deltaY = mouseY - startY;
    var newOffset = offset + deltaY;
    
    image.style.top = newOffset + "px";
  });
};

Copy after login

In the above code, we first obtain the DOM elements of the container and image, which are stored in the variable container respectively. and image. Then, we created some variables to store drag related information.

Next, we bind the mousedown event to the picture. When the mouse is pressed, the isDragging flag is set to true, and the Y coordinate of the current mouse and the offset of the picture are saved. Then, we bound the mouseup event to the window object. When the mouse is released, the isDragging flag is set to false, indicating that the dragging is completed. Finally, we bound the mousemove event to the container. When the mouse moves in the container, if it is being dragged, we calculate the new image offset and apply it to the top style of the image to realize the dragging of the image. Effect.

At this point, we have completed the implementation of the up and down drag switching effect of the image. You can modify or adjust the code according to actual needs to meet different effects and requirements.

Through the above example code, we can see that JavaScript is very flexible and powerful. Through some simple DOM operations and event binding, we can achieve a variety of interactive effects. Hope this article can help you, if you have any questions, please feel free to ask us.

The above is the detailed content of How to use JavaScript to achieve the effect of dragging up and down images?. For more information, please follow other related articles on the PHP Chinese website!