Rumah hujung hadapan web tutorial js Bagaimana untuk menggunakan JavaScript untuk menyeret dan mengezum imej sambil mengehadkannya kepada bekas?

Bagaimana untuk menggunakan JavaScript untuk menyeret dan mengezum imej sambil mengehadkannya kepada bekas?

Oct 20, 2023 pm 04:19 PM
seret Zum had

JavaScript 如何实现图片的拖动缩放同时限制在容器内?

JavaScript Bagaimana untuk merealisasikan menyeret dan mengezum imej sambil mengehadkannya kepada bekas?

Dalam pembangunan web, kami sering menghadapi keperluan untuk menyeret dan mengezum imej. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan menyeret dan mengezum imej dan mengehadkan operasi dalam bekas.

1. Seret gambar

Untuk merealisasikan penyeretan gambar, kita boleh menggunakan acara tetikus untuk mengesan kedudukan tetikus dan mengalihkan kedudukan gambar dengan sewajarnya. Berikut ialah contoh kod:

// 获取图片元素
var image = document.getElementById('image');

var isDragging = false; // 是否正在拖动
var startX = 0; // 开始拖动时的鼠标水平位置
var startY = 0; // 开始拖动时的鼠标垂直位置
var offsetX = 0; // 图片偏移量
var offsetY = 0; // 图片偏移量

// 鼠标按下时的事件处理函数
image.onmousedown = function(e) {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  offsetX = image.offsetLeft;
  offsetY = image.offsetTop;
};

// 鼠标移动时的事件处理函数
document.onmousemove = function(e) {
  if (isDragging) {
    var deltaX = e.clientX - startX;
    var deltaY = e.clientY - startY;
    image.style.left = offsetX + deltaX + 'px';
    image.style.top = offsetY + deltaY + 'px';
  }
};

// 鼠标松开时的事件处理函数
document.onmouseup = function() {
  isDragging = false;
};
Salin selepas log masuk

Dalam kod di atas, kami menggunakan tiga fungsi pengendalian acara: onmousedown, onmouseup dan onmouseup Capai penyeretan kesan. Dalam onmousedown, kami merekodkan kedudukan tetikus dan offset awal imej. Dalam onmousemove, jika penyeretan sedang dijalankan, anjakan tetikus dikira dan kedudukan imej dikemas kini. Dalam onmouseup kami menetapkan bendera seret isDragging kepada false. onmousedownonmousemoveonmouseup 三个事件处理函数来实现拖动效果。在 onmousedown 中,我们记录了鼠标的位置和图片的初始偏移量。在 onmousemove 中,如果正在拖动,就计算鼠标的位移,并更新图片的位置。在 onmouseup 中,我们将拖动标志 isDragging 设为 false

二、缩放图片

要实现图片的缩放,我们可以使用鼠标滚轮事件来监听鼠标滚动,并改变图片的大小。下面是一个示例代码:

// 获取图片元素
var image = document.getElementById('image');

var scaleFactor = 1; // 缩放比例

// 鼠标滚轮事件处理函数
image.onmousewheel = function(e) {
  e.preventDefault();
  
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // 跨浏览器兼容性处理

  // 计算缩放比例
  if (delta > 0) {
    scaleFactor *= 1.1;
  } else {
    scaleFactor *= 0.9;
  }

  // 设置图片的缩放
  image.style.transform = 'scale(' + scaleFactor + ')';
};
Salin selepas log masuk

在上面的代码中,我们使用了浏览器的滚轮事件来监听鼠标滚动。我们通过判断滚轮滚动的方向,来改变缩放比例 scaleFactor。然后,我们使用 transform

2. Zum gambar

Untuk merealisasikan zoom gambar, kita boleh menggunakan acara roda tetikus untuk mendengar skrol tetikus dan menukar saiz gambar. Berikut ialah contoh kod:

// 获取图片元素和容器元素
var image = document.getElementById('image');
var container = document.getElementById('container');

// 容器的宽度和高度
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;

// 获取图片的原始宽度和高度
var imageWidth = image.offsetWidth;
var imageHeight = image.offsetHeight;

// 计算边界
var maxX = containerWidth - imageWidth;
var maxY = containerHeight - imageHeight;

// 拖动图片时的事件处理函数
// ...

// 缩放图片时的事件处理函数
// ...
Salin selepas log masuk
Dalam kod di atas, kami menggunakan acara roda penyemak imbas untuk mendengar tatal tetikus. Kami menukar nisbah zum scaleFactor dengan menilai arah roda skrol. Kemudian, kami menggunakan atribut transform untuk menetapkan penskalaan imej.

3. Terhad pada bekas

Untuk mengehadkan imej pada bekas, kita perlu menambah beberapa sekatan pada kod seret dan zum. Berikut ialah contoh kod: 🎜rrreee🎜Dalam kod di atas, kita mula-mula mendapat lebar dan tinggi elemen bekas, serta lebar dan tinggi asal elemen imej. Seterusnya, kami mengira sempadan di mana imej boleh bergerak dalam bekas. Dalam pengendali acara seret dan zum, kami menggunakan sempadan ini untuk mengehadkan kedudukan dan saiz imej. 🎜🎜Ringkasnya, kita boleh menggunakan kod di atas untuk merealisasikan seret dan zum imej dan mengehadkannya kepada bekas. Ini membolehkan pengguna menyeret dan mengezum imej secara bebas dalam bekas. Sudah tentu, kami juga boleh mengubah suai dan mengoptimumkan kod mengikut keperluan tertentu. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk menyeret dan mengezum imej sambil mengehadkannya kepada bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Paparkan panduan penskalaan pada Windows 11 Paparkan panduan penskalaan pada Windows 11 Sep 19, 2023 pm 06:45 PM

Kita semua mempunyai pilihan yang berbeza apabila ia berkaitan dengan penskalaan paparan pada Windows 11. Sesetengah orang suka ikon besar, ada yang suka ikon kecil. Walau bagaimanapun, kita semua bersetuju bahawa mempunyai penskalaan yang betul adalah penting. Penskalaan fon yang lemah atau penskalaan berlebihan imej boleh menjadi pembunuh produktiviti sebenar apabila bekerja, jadi anda perlu tahu cara menyesuaikannya untuk memanfaatkan sepenuhnya keupayaan sistem anda. Kelebihan Zum Tersuai: Ini adalah ciri yang berguna untuk orang yang mengalami kesukaran membaca teks pada skrin. Ia membantu anda melihat lebih banyak pada skrin pada satu masa. Anda boleh membuat profil sambungan tersuai yang digunakan hanya pada monitor dan aplikasi tertentu. Boleh membantu meningkatkan prestasi perkakasan kelas rendah. Ia memberi anda lebih kawalan ke atas perkara yang terdapat pada skrin anda. Cara menggunakan Windows 11

Isu zum Safari pada iPhone: Inilah penyelesaiannya Isu zum Safari pada iPhone: Inilah penyelesaiannya Apr 20, 2024 am 08:08 AM

Jika anda tidak mempunyai kawalan ke atas tahap zum dalam Safari, menyelesaikan sesuatu boleh menjadi sukar. Jadi jika Safari kelihatan dizum keluar, itu mungkin menjadi masalah untuk anda. Berikut ialah beberapa cara anda boleh membetulkan isu zum kecil ini dalam Safari. 1. Pembesaran kursor: Pilih "Paparan" > "Pembesaran kursor" dalam bar menu Safari. Ini akan menjadikan kursor lebih kelihatan pada skrin, menjadikannya lebih mudah untuk dikawal. 2. Gerakkan tetikus: Ini mungkin kedengaran mudah, tetapi kadangkala hanya menggerakkan tetikus ke lokasi lain pada skrin boleh mengembalikannya ke saiz normal secara automatik. 3. Gunakan Pintasan Papan Kekunci Betulkan 1 – Tetapkan Semula Tahap Zum Anda boleh mengawal tahap zum terus daripada penyemak imbas Safari. Langkah 1 – Apabila anda berada di Safari

Bagaimana untuk mengezum halaman sebelah menyebelah dalam perkataan Bagaimana untuk mengezum halaman sebelah menyebelah dalam perkataan Mar 19, 2024 pm 07:19 PM

Apabila kami menggunakan dokumen perkataan untuk mengedit fail, kadang-kadang terdapat banyak halaman Kami ingin memaparkannya secara bersebelahan dan menyemak kesan keseluruhannya, tetapi kerana kami tidak tahu bagaimana untuk beroperasi, kami sering perlu menatal untuk masa yang lama untuk melihat halaman demi halaman. Saya tidak tahu sama ada anda pernah mengalami situasi yang sama, sebenarnya, kita boleh menyelesaikannya dengan mudah pada masa ini selagi kita belajar cara menetapkan perkataan zum halaman sebelah menyebelah. Di bawah, mari kita lihat dan belajar bersama. Mula-mula, kami mencipta dan membuka halaman baharu dalam dokumen Word, dan kemudian masukkan beberapa kandungan mudah untuk memudahkannya dibezakan. 2. Sebagai contoh, jika kita ingin merealisasikan zum perkataan dan paparan sebelah menyebelah, kita perlu mencari [Lihat] dalam bar menu, dan kemudian pilih [Multiple Pages] dalam pilihan alat paparan, seperti yang ditunjukkan dalam rajah. di bawah: 3. Cari [Multiple Pages] dan klik,

Bagaimana untuk mengalih keluar sekatan ulasan pada akaun video? Apakah had perkataan untuk ulasan pada akaun video? Bagaimana untuk mengalih keluar sekatan ulasan pada akaun video? Apakah had perkataan untuk ulasan pada akaun video? Mar 22, 2024 pm 02:11 PM

Dengan populariti akaun video di media sosial, semakin ramai orang mula menggunakan akaun video untuk berkongsi kehidupan harian, pandangan dan cerita mereka. Walau bagaimanapun, sesetengah pengguna mungkin mengalami ulasan yang disekat, yang boleh menyebabkan mereka keliru dan tidak berpuas hati. 1. Bagaimana untuk mengalih keluar sekatan ulasan pada akaun video? Untuk menarik balik sekatan mengulas pada akaun video, anda mesti terlebih dahulu memastikan akaun tersebut telah didaftarkan dengan betul dan pengesahan nama sebenar telah selesai. Akaun video mempunyai keperluan untuk ulasan Hanya akaun yang telah melengkapkan pengesahan nama sebenar boleh menarik balik sekatan ulasan. Jika terdapat sebarang keabnormalan dalam akaun, isu ini perlu diselesaikan sebelum sekatan ulasan boleh ditarik balik. 2. Mematuhi piawaian komuniti akaun video. Akaun video mempunyai piawaian tertentu untuk kandungan ulasan Jika ulasan itu melibatkan kandungan yang menyalahi undang-undang, anda akan disekat daripada bercakap. Untuk menarik balik sekatan ulasan, anda perlu mematuhi komuniti akaun video tersebut

Petua penyuntingan dokumen perkataan: Jadikan dua halaman kandungan menjadi satu Petua penyuntingan dokumen perkataan: Jadikan dua halaman kandungan menjadi satu Mar 25, 2024 pm 06:06 PM

Dalam dokumen Microsoft Word, anda sering menghadapi situasi menggabungkan dua halaman kandungan menjadi satu halaman, terutamanya apabila anda perlu menyimpan kertas atau apabila anda perlu mencetak dokumen dua muka. Beberapa kaedah biasa untuk mencapai matlamat ini akan diperkenalkan di bawah. Kaedah 1: Laraskan margin halaman Mula-mula buka dokumen Word dan cari pilihan "Layout Halaman" dalam bar menu Selepas mengklik, menu tetapan susun atur halaman akan muncul. Di sini anda boleh melaraskan jidar halaman, termasuk jidar atas, bawah, kiri dan kanan. Secara umumnya, menjadikan margin atas dan bawah lebih kecil akan membolehkan kandungan dimuatkan dalam satu halaman. anda boleh rasa

Bagaimana untuk membesarkan atau mengurangkan keseluruhan jadual excel Bagaimana untuk membesarkan atau mengurangkan keseluruhan jadual excel Mar 20, 2024 pm 05:16 PM

Perkembangan teknologi komputer, teknologi rangkaian dan teknologi perisian telah memberikan prospek yang hebat untuk automasi pejabat. Operasi pejabat semasa kami boleh dijalankan secara elektronik, yang sangat menjimatkan masa operasi jadual Excel adalah operasi perisian yang biasa digunakan Kadang-kadang kami perlu membesarkan atau mengurangkan keseluruhan jadual excel berdasarkan masalah tetapan kertas, jika terdapat sebarang kaedah operasi yang boleh memenuhi keperluan kita, mari kita lihat kursus berikut. 1. Mula-mula buka perisian excel dan masukkan maklumat yang berkaitan, seperti yang ditunjukkan dalam rajah di bawah. 2. Kemudian klik ikon di sudut kanan bawah dan gerakkannya ke kiri atau kanan Tanda tambah boleh mengezum masuk dan tanda tolak boleh mengezum keluar, seperti yang ditunjukkan dalam rajah di bawah. 3. Kaedah kedua juga boleh menggunakan ctrl + roda tetikus.

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan penukaran seret kiri dan kanan imej? Bagaimana untuk menggunakan JavaScript untuk mencapai kesan penukaran seret kiri dan kanan imej? Oct 21, 2023 am 09:27 AM

Bagaimana untuk mencapai kesan penukaran seret kiri dan kanan imej dengan JavaScript? Dalam reka bentuk web moden, kesan dinamik boleh meningkatkan pengalaman pengguna dan daya tarikan visual. Kesan penukaran seret kiri dan kanan gambar ialah kesan dinamik biasa, yang membolehkan pengguna menukar kandungan berbeza dengan menyeret gambar. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan penukaran imej ini dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan beberapa kod HTML dan CSS untuk mencipta imej yang mengandungi berbilang imej

Bagaimana untuk menskala dan memutar imej menggunakan Python Bagaimana untuk menskala dan memutar imej menggunakan Python Aug 17, 2023 pm 10:52 PM

Cara menggunakan Python untuk menskala dan memutar imej Pengenalan: Hari ini, kami sering menggunakan imej untuk memperkayakan reka bentuk web, aplikasi mudah alih, media sosial dan senario lain kami. Dalam pemprosesan imej, penskalaan dan putaran adalah dua keperluan biasa. Python, sebagai bahasa skrip dan alat pemprosesan imej yang berkuasa, menyediakan banyak perpustakaan dan kaedah untuk mengendalikan tugasan ini. Artikel ini akan memperkenalkan cara menggunakan Python untuk menskala dan memutar imej, serta memberikan contoh kod. 1. Mengezum gambar Mengezum gambar adalah salah satu operasi asas melaraskan saiz imej.

See all articles