Sering ada area tampilan produk di halaman produk situs web belanja. Salah satu fungsi di area gambar ini adalah fungsi pembesaran dari gambar produk. Pindahkan area fokus di sebelah kiri untuk memperbesar detail dan melihat detailnya. Dengan rincian sebagai berikut. Metode untuk mengimplementasikan fungsi ini juga sangat sederhana.
Eksperimen: Membuat gambar yang diperbesar dari fokus produk.
Keterampilan yang Diperlukan:
1. Metode dasar untuk mendapatkan elemen halaman;
2. Beberapa acara sederhana;
3. Anda akan menggunakan DOM untuk mengatur atribut elemen;
Prinsip Kasus:
1. Ikuti acara mouse dari kotak fokus;
2. Peraturan tentang area pemindahan kotak fokus;
3. Tampilan Isi Kotak Besar;
Cocok untuk: Pemula JS
-------------------------------------------------------------------awal! -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Pertama, kami menyiapkan gaya CSS. Beberapa poin yang perlu diperhatikan dalam gaya CSS adalah:
(1) peta fokus relatif terhadap posisi, tampilan default: tidak ada;
(2) kotak yang menunjukkan gambar besar di sebelah kanan (selanjutnya disebut sebagai bingkai gambar besar) Tampilan default: Tidak ada; Konten dalam bingkai gambar besar harus disembunyikan setelah meluap: tersembunyi;
2. Mulailah menulis kode skrip:
(1) Pertama dapatkan elemen halaman:
// Pertama -tama, fungsi elemen getId (tag) untuk dioperasikan {// Tentukan metode untuk mendapatkan elemen dengan ID, yang mengurangi banyak beban kerja! return document.getElementById (tag)} var box = getId ("box"); var small = getId ("kecil"); var mask = getId ("mask"); var Big = getId ("BIG"); var pic = Big.Children [0]; // Ini untuk mendapatkan elemen melalui metode node(2) Pastikan dua peristiwa akan muncul ketika mouse bergerak ke gambar kecil: 1) kotak fokus harus ditampilkan; 2) Kotak gambar besar harus ditampilkan. Demikian pula, setelah mouse dihilangkan, kedua daun ini harus dibatalkan.
// dua efek muncul saat memindahkan mouse ke gambar small.onmouseover = function () {mask.style.display = "block"; big.style.display = "block"; } small.onmouseout = function () {mask.style.display = "none"; Big.Style.Display = "None"}(3) Atur kotak fokus berikut:
1) Ketika kotak fokus ditetapkan, waktu berikut kami adalah fakta, jadi jenis acara di sini bukanlah onmouseover; Tapi onMouseMove;
2) Masalah yang terlibat dalam kode ini terutama adalah masalah perhitungan penentuan posisi topeng (kotak fokus). Masalah yang mudah diabaikan adalah posisi siapa topeng bergerak? Dalam gaya CSS saya, topeng ditempatkan di kotak kecil, sehingga posisi bergerak relatif harus menjadi posisi elemen induk kecil yang telah diposisikan. Jadi posisi koordinat yang saya dapatkan dengan ClientX dan klien relatif terhadap jendela browser saat ini tidak dapat digunakan secara langsung, dan pengaruh nilai margin kotak induknya harus dikurangi.
// Atur kotak fokus gambar kecil dan ikuti mouse; small.onmouseMove = function (e) {var marginl = box.offsetleft; // Gunakan metode offsetleft untuk mendapatkan margin-kiri kotak var margint = box.offsettop; // Gunakan metode offsettop untuk mendapatkan margin-top dari kotak var currentx = e.clientx; var currenty = e.clienty; // Gunakan E.Clinety dan E.Clinety relatif ke sudut kiri atas browser var x = currentx-marginl-mask.offsetwidth/2; var y = Currenty-margint-mask.offsetheight/2; // Untuk menyelaraskan pusat kotak fokus dengan mouse, Anda perlu mengurangi setengah dari lebar dan ketinggian fokus Kotak/--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------(4) Pergerakan posisi kotak fokus idle
1) Setelah langkah sebelumnya selesai, pergerakan kotak fokus tidak menganggur. Selama proses menjelajahi situs web belanja, kami dapat dengan jelas merasa bahwa kotak fokus tidak memungkinkan gerakan di luar gambaran kecil, menyebabkan pengalaman pengguna yang buruk;
2) untuk membatasi pergerakan kotak fokus, terutama ketika perubahan x dan y melebihi nilai yang diijinkan, berikan nilai tetap;
// Atur kotak fokus gambar kecil dan ikuti mouse; small.onmouseMove = function (e) {var marginl = box.offsetleft; var margint = box.offsettop; var currentx = e.clientx; var currenty = e.clienty; var x = currentX-marginl-mask.offsetWidth/2; var y = Currenty-margint-mask.offsetheight/2; // Atur area bergerak untuk kotak fokus jika (x <0) {x = 0;} if (x> small.offsetWidth-mask.offsetWidth) {x = small.offsetWidth-mask.offsetWidth}; // Nilai minimum x yang digunakan untuk penentuan posisi adalah 0, dan nilai maksimum adalah panjang sumbu y-mask kecil. Hal yang sama berlaku untuk sumbu y if (y <0) {y = 0;} if (y> small.offsetheight-mask.offsetheight) {y = small.offsetheight-mask.offsetheight}; mask.style.left = x+"px"; // Perhatikan bahwa area pemindahan ditulis setelah area pergerakan ditentukan, dan perhatikan urutan eksekusi kode mask.style.top = y+"px";(5) Atur tampilan gambar besar
1) Untuk mewujudkan pergerakan gambar dalam kotak besar, Anda harus memikirkan nilai -margin;
2) Berapa banyak jarak yang dapat Anda pindahkan dapat digunakan untuk mengalikan nilai topeng kiri dan atas dengan proporsi yang tetap. Pikirkan tentang posisi yang ditampilkan di sudut kiri atas area fokus dan sudut kiri atas bingkai gambar besar adalah sama! Lai Lai Ini tidak terlalu sulit untuk dipahami.
// atur konten yang ditampilkan di kotak besar var relativex = mask.offsetleft; var relative = mask.offsettop; var proporationx = pic.offsetWidth/small.offsetWidth; // atur rasio var proporationy = pic.offsetheight/small.offsetwidth; pic.style.marginleft = -relaticex*proporationx+"px"; //Catatan! Nilai margin harus negatif, "px tidak membuang pic.style.margintop = -relative*proporationy+" px ";
Pada titik ini, demo kami selesai! Bukankah itu sangat sederhana
Saya akan menempelkan seluruh kode di bawah ini, berharap untuk berdiskusi dan berkomunikasi dengan Anda.
Ini kode CSS
<tyle> * {margin: 0; Padding: 0; } #box {margin: 50px; } #small {width: 229px; Tinggi: 250px; Perbatasan: 1px solid black; Teks-Align: tengah; Posisi: kerabat; float: kiri; } #mask {width: 100px; Tinggi: 100px; Latar Belakang: RGBA (214, 111, 193, 0.3); Posisi: Absolute; TOP: 0; Kiri: 0; /*display: none;*/} #big {width: 350px; Tinggi: 350px; Perbatasan: 1px solid black; float: kiri; meluap: tersembunyi; /*Display: None;*/} </style>Ini html
<body> <v id = "box"> <div id = "small"> <img src = "small_img.jpg"/> <div id = "mask"> </div> </div> <div id = "BIG"> <img src = "BIG_IMG.JPG"/</DIV> </div>
Ini kode JS
<script> // Pertama -tama, elemen yang akan dioperasikan fungsi getId (tag) {return document.getElementById (tag)} var box = getId ("box"); var small = getId ("kecil"); var mask = getId ("mask"); var Big = getId ("BIG"); var pic = Big.Children [0]; Console.log (pic); // mouse bergerak ke gambar dan dua efek tampak kecil.onmouseover = function () {mask.style.display = "block"; big.style.display = "block"; } small.onmouseout = function () {mask.style.display = "none"; big.style.display = "none"} // atur kotak fokus gambar kecil dan ikuti mouse; small.onmouseMove = function (e) {var marginl = box.offsetleft; var margint = box.offsettop; var currentx = e.clientx; var currenty = e.clienty; var x = currentX-marginl-mask.offsetWidth/2; var y = Currenty-margint-mask.offsetheight/2; // Atur area bergerak untuk kotak fokus jika (x <0) {x = 0;} if (x> small.offsetWidth-mask.offsetWidth) {x = small.offsetWidth-mask.offsetWidth}; if (y <0) {y = 0;} if (y> small.offsetheight-mask.offsetHeight) {y = small.offsetheight-mask.offsetHeight}; mask.style.left = x+"px"; mask.style.top = y+"px"; // atur konten yang ditampilkan di kotak besar var relativex = mask.offsetleft; var relative = mask.offsettop; var relative = mask.offsettop; var proporationx = pic.offsetWidth/small.offsetWidth; var proporationy = pic.offsetheight/small.offsetwidth; pic.style.marginleft = -relaticex*proporationx+"px"; pic.style.margintop = -relativey*proporationy+"px"; } </script>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.