Saya sedikit bersemangat ketika saya memposting blog untuk pertama kalinya. Saya sekarang di Tianjin. Saya berharap untuk bekerja di industri front-end di masa depan dan saya tidak akan bisa belajar untuk waktu yang lama. Untuk merekam proses pembelajaran dan keuntungan saya, saya tentu saja konsolidasi. Hal -hal yang saya tulis mungkin tidak setinggi banteng besar, tetapi mereka hanya beberapa konten dasar. Tentu saja, saya juga akan mengumpulkan beberapa artikel bagus yang menurut saya bagus (sebenarnya, saya bisa memahaminya ...). Saya percaya bahwa saya dapat menulis sesuatu yang kelas atas di masa depan. Ayo!
Saya berbicara sedikit omong kosong, berbicara tentang masalah serius. Beberapa hari yang lalu, saya menonton video mengajar pendidikan Tanzhou. Guru itu menggunakan jQuery untuk mencapai efek kaca pembesar (guru mengatakan bahwa itu terlalu lambat, dan dia melompat -lompat dan menontonnya). Karena saya belum belajar dengan baik, tetapi kode dasar masih bisa dimengerti, saya ingin berlatih dengan JS yang saat ini saya pelajari, dan akhirnya berhasil mencapai efek ini.
Ide: Pertama biarkan blok bergerak dan blok BIMG bersembunyi. Ketika mouse bergerak ke kotak, blok bergerak dan blok BIMG ditampilkan, dan posisi mouse saat ini diperoleh. Kemudian, setelah perhitungan, nilai yang sesuai untuk blok bergerak dan blok BIMG diberikan untuk mencapai efek kaca pembesar (perhitungan posisi blok bergerak dan blok BIMG dirinci nanti)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Magnifying Glass</title> <link href="css/bigimg.css" rel="stylesheet" /> <script src="js/bigimg.js"></script></head><body onload="bigimg()"> <div id="box"> <img src="images/simg.jpg"> <div id="move"></div> <div id="bimg"> <img id="b_bimg"> src="images/bimg.jpg"> </div> </div></body></html>
Gaya CSS:
*{margin: 0px; padding: 0px;}#box {width: 430px; Tinggi: 430px; margin: 100px; margin-kiri: 17%; Posisi: relatif; // Gunakan posisi relatif di sini sehingga elemen lain dapat mengandalkan elemen ini untuk memposisikan} #move {latar belakang-image: url (../ gambar/move.png); Lebar: 220px; Tinggi: 220px; Posisi: Absolute; Kiri: 0px; Atas: 0px; Tampilan: Tidak Ada; // Biarkan sembunyikan terlebih dahulu dan gunakan JS untuk menampilkannya} #bimg {width: 430px; Tinggi: 430px; meluap: tersembunyi; Posisi: Absolute; Atas: 0px; Kiri: 450px; Tampilan: Tidak Ada; // Biarkan sembunyikan terlebih dahulu dan gunakan JS untuk menampilkannya} #bimg img {width: 800px; Tinggi: 800px; Posisi: Absolute; Atas: 0px; Kiri: 0px;}Javascript:
fungsi bigimg () {var bbox = document.geteLementById ("box"); var bmove = document.geteLementById ("move"); var bbimg = document.getElementById ("bimg"); var b_bimg = document.getElementById ("b_bimg"); bbox.onmouseover = function () {// Pindahkan mouse ke kotak untuk menampilkan gambar besar dan pilih kotak bbimg.style.display = "block"; bmove.style.display = "block"; } bbox.onmouseout = function () {// mousemove tidak menampilkan gambar besar dan kotak centang saat kotak dipindahkan dari mouse bbimg.style.display = "none"; bmove.style.display = "none"; } bbox.onMouseMove = function (e) {// Dapatkan posisi mouse var x = e.clientx; // posisi mouse relatif terhadap viewport var y = e.clienty; var t = bbox.offsettop; // posisi kotak relatif terhadap viewport var l = bbox.offsetleft; var _left = x - l - bmove.offsetWidth/2; // Hitung posisi pindahkan var _top = y - t -bmove.offsetheight/2; if (_top <= 0) // geser ke bagian atas box_top = 0; lain jika (_top> = bbox.offsetheight-bmove.offsetheight) // geser ke bagian bawah box_top = bbox.offsetheight-bmove.offsetheight; if (_Left <= 0) // Geser ke paling kiri box_left = 0; lain if (_left> = bbox.offsetWidth-bmove.offsetWidth) // Geser ke kanan paling kanan box_left = bbox.offsetWidth-bmove.offsetWidth; bmove.style.top = _top + "px"; // Atur posisi MOVE BMOVE.STYLE.LEFT = _LEFT + "PX"; var w = _Left/(bbox.offsetWidth-bmove.offsetWidth); // Hitung rasio gerakan var h = _top/(bbox.offsetheight-bmove.offsetheight); var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // Hitung posisi gambar besar var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w; b_bimg.style.top = -b_bimg_top + "px"; // Atur informasi lokasi dari gambar besar b_bimg.style.left = -b_bimg_left + "px"; }}Gambar reproduksi:
1. Perhitungan blok bergerak
Panah hitam:
var x = e.clientx; // posisi mouse relatif terhadap viewport var y = e.clienty;
Panah Merah:
var t = bbox.offsettop; // posisi kotak relatif terhadap viewport var l = bbox.offsetleft;
Panah oranye:
var _left = x - l - bmove.offsetWidth/2; // Hitung posisi bergerak var _top = y - t -bmove.offsetheight/2;
2. Perhitungan blok bimg
Gunakan skala blok bergerak dalam kisaran bergerak untuk mengatur posisi gambar besar
Rentang Pindah Blok Pindah:
bbox.offsetwidth-bmove.offsetwidth
Koordinat saat ini dari akun blok pindah untuk rentang bergerak:
var w = _Left/(bbox.offsetWidth-bmove.offsetWidth); // Hitung rasio gerakan var h = _top/(bbox.offsetheight-bmove.offsetheight);
Rentang Gerakan BIMG:
b_bimg.offsetheight-bbimg.offsetheight
Lokasi BIMG:
var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // Hitung posisi gambar besar var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w;
Contoh sederhana di atas menggunakan JS untuk mencapai efek kaca pembesar adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.