Bagaimana untuk menukar kedudukan beberapa set gambar dalam javascript

Dalam pembangunan bahagian hadapan, pemprosesan imej adalah bahagian penting. Beberapa set gambar selalunya perlu dipaparkan pada halaman web, dan kedudukan gambar ini perlu diubah secara dinamik untuk menyesuaikan diri dengan perubahan halaman. Dalam kes ini, kita boleh menggunakan JavaScript untuk menukar kedudukan berbilang set imej.

1. Cipta imej secara dinamik

Sebelum menggunakan JavaScript untuk menukar kedudukan berbilang set imej, kita perlu menggunakan JavaScript untuk mencipta imej secara dinamik. Di sini kita boleh menggunakan kaedah DOM untuk mencipta dan memasukkan elemen HTML.

Mula-mula buat bekas div, kemudian gunakan JavaScript untuk mencipta teg img secara dinamik dan tetapkan atribut src dan atribut kelas, dan akhirnya masukkan teg img ke dalam bekas div.

<div id="img-container"></div>

<script>
var container = document.getElementById("img-container");
var img1 = document.createElement("img");
img1.src="img1.jpg";
img1.className="img-group1";
container.appendChild(img1);

var img2 = document.createElement("img");
img2.src="img2.jpg";
img2.className="img-group2";
container.appendChild(img2);
</script>

Dalam kod ini, kami menggunakan kaedah document.createElement() untuk mencipta teg img dan menetapkan atribut src dan atribut kelas. Akhir sekali, kami menggunakan kaedah appendChild() untuk memasukkan teg img ke dalam bekas div yang ditentukan.

2. Gunakan gaya CSS untuk mengawal kedudukan imej

Selepas mencipta imej, kita boleh menggunakan gaya CSS untuk mengawal kedudukan imej. Di sini, kita boleh mengawal kedudukan imej dengan menetapkan kedudukan, kiri dan atribut atas teg img.

Andaikan kita perlu membahagikan gambar kepada dua kumpulan, dan setiap kumpulan gambar perlu disusun bersebelahan di sebelah kiri dan kanan halaman. Kita boleh menetapkan atribut kiri satu kumpulan gambar kepada 0, dan atribut kiri kumpulan gambar lain kepada lebar halaman tolak lebar gambar, supaya kedua-dua kumpulan gambar boleh diletakkan di sebelah kiri dan kanan halaman masing-masing.

.img-group1{
    position: absolute;
    left: 0;
    top: 0;
}

.img-group2{
    position: absolute;
    left: calc(100% - 300px);
    top: 0;
}

Dalam kod ini, kami menggunakan nilai piksel tepat dan fungsi calc() untuk menetapkan sifat kiri. Fungsi calc() boleh melakukan operasi aritmetik mudah, yang boleh membantu kami mengawal kedudukan imej dengan lebih tepat.

3. Gunakan JavaScript untuk menukar kedudukan imej secara dinamik

Apabila lebar halaman berubah, anda perlu menggunakan JavaScript untuk menukar kedudukan imej secara dinamik. Kita boleh menggunakan acara window.onresize untuk mendengar perubahan dalam lebar halaman dan menukar kedudukan imej secara dinamik apabila lebar berubah.

Di sini, kita boleh menggunakan JavaScript untuk mendapatkan lebar halaman, dan kemudian mengira semula dan menetapkan atribut kiri imej. Kita boleh menggunakan kaedah querySelectorAll() untuk mendapatkan semua elemen imej dan menggunakan gelung for untuk melelaran melalui elemen ini.

window.onresize = function(){
    var imgWidth = document.querySelector(".img-group1").offsetWidth; //假设所有图片宽度相同，这里只获取了一个图片的宽度
    var pageWidth = document.documentElement.clientWidth; //获取页面宽度
    var img2Left = pageWidth - imgWidth; //计算图片2的left属性值

    var imgElements = document.querySelectorAll("img"); //获取所有的img元素

    for(var i=0; i<imgElements.length; i++){
        if(imgElements[i].className === "img-group1"){ //设置图片1的left属性
            imgElements[i].style.left = "0";
        }
        if(imgElements[i].className === "img-group2"){ //设置图片2的left属性
            imgElements[i].style.left = img2Left + "px";
        }
    }
}

Dalam kod ini, kami menggunakan atribut offsetWidth untuk mendapatkan lebar imej dan atribut clientWidth untuk mendapatkan lebar halaman. Kemudian, kami mengira nilai atribut kiri gambar 2, dan menggunakan gelung for untuk melintasi semua elemen img, dan tetapkan atribut kiri setiap gambar mengikut className.

Kesimpulan

Kod di atas melaksanakan fungsi menukar kedudukan berbilang set gambar secara dinamik menggunakan JavaScript. Teknologi ini sangat biasa dalam pembangunan bahagian hadapan dan boleh membantu kami mengawal kesan visual halaman dengan lebih tepat.

Atas ialah kandungan terperinci Bagaimana untuk menukar kedudukan beberapa set gambar dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!