Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menyeret ke atas dan ke bawah imej?-tutorial js-php.cn

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menyeret ke atas dan ke bawah imej?

王林

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

asal

1475 orang telah melayarinya

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

JavaScript Bagaimana untuk mencapai kesan menyeret ke atas dan ke bawah imej?

Dengan perkembangan Internet, gambar memainkan peranan penting dalam kehidupan dan kerja kita. Untuk meningkatkan pengalaman pengguna, kami selalunya perlu menambahkan beberapa kesan khas atau kesan interaktif pada gambar. Antaranya, kesan menyeret ke atas dan ke bawah gambar untuk bertukar adalah kesan yang sangat biasa, mudah dan praktikal. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan ini dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta fail HTML untuk memaparkan imej dan mencapai kesan seretan. Kodnya adalah seperti berikut:

<!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>

Salin selepas log masuk

Dalam kod di atas, kami mencipta div dengan id "bekas" untuk memegang imej. Kami menetapkannya kepada kedudukan relatif dan menetapkan gaya lebar, ketinggian dan limpahannya untuk mengehadkan kawasan paparan imej. Kami juga mencipta teg img dengan id "imej" untuk memaparkan imej. Kami menetapkannya kepada kedudukan mutlak dan menetapkan lebar dan tingginya kepada 100% untuk memastikan imej memenuhi bekas induk.

Seterusnya, kita perlu menulis kod JavaScript untuk mencapai kesan seretan imej. Cipta fail JavaScript bernama script.js dan tambahkan kod berikut pada fail:

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

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mendapatkan elemen DOM bagi bekas dan imej, yang masing-masing disimpan dalam bekas pembolehubah dan imej. Kemudian, kami mencipta beberapa pembolehubah untuk menyimpan maklumat berkaitan seretan.

Seterusnya, kami mengikat acara turun tetikus pada imej Apabila tetikus ditekan, bendera isDragging ditetapkan kepada benar, dan koordinat Y semasa tetikus dan ofset imej disimpan. Kemudian, kami mengikat acara tetikus ke objek tetingkap Apabila tetikus dilepaskan, bendera isDragging ditetapkan kepada palsu, menunjukkan bahawa penyeretan telah selesai. Akhir sekali, kami mengikat peristiwa pergerakan tetikus pada bekas Apabila tetikus bergerak dalam bekas, jika ia diseret, kami mengira mengimbangi imej baharu dan menerapkannya pada gaya atas imej untuk merealisasikan seretan imej .

Pada ketika ini, kami telah menyelesaikan pelaksanaan kesan penukaran menyeret ke atas dan ke bawah imej. Anda boleh mengubah suai atau melaraskan kod mengikut keperluan sebenar untuk memenuhi kesan dan keperluan yang berbeza.

Melalui contoh kod di atas, kita dapat melihat bahawa JavaScript adalah sangat fleksibel dan berkuasa. Melalui beberapa operasi DOM mudah dan pengikatan peristiwa, kami boleh mencapai pelbagai kesan interaktif. Harap artikel ini dapat membantu anda, jika anda mempunyai sebarang pertanyaan, sila berasa bebas untuk bertanya kepada kami.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menyeret ke atas dan ke bawah imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!