


Bagaimana untuk menggunakan JavaScript untuk menyeret dan mengezum imej sambil mengehadkannya kepada bekas?
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; };
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
. onmousedown
、onmousemove
和 onmouseup
三个事件处理函数来实现拖动效果。在 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 + ')'; };
在上面的代码中,我们使用了浏览器的滚轮事件来监听鼠标滚动。我们通过判断滚轮滚动的方向,来改变缩放比例 scaleFactor
。然后,我们使用 transform
// 获取图片元素和容器元素 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; // 拖动图片时的事件处理函数 // ... // 缩放图片时的事件处理函数 // ...
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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

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

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

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,

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

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

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

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.
