So ändern Sie die Position mehrerer Bildsätze in Javascript

In der Frontend-Entwicklung ist die Bildverarbeitung ein wesentlicher Bestandteil. Auf Webseiten müssen häufig mehrere Bildsätze angezeigt werden, und die Positionen dieser Bilder müssen dynamisch geändert werden, um sie an Seitenänderungen anzupassen. In diesem Fall können wir JavaScript verwenden, um die Position mehrerer Bildsätze zu ändern.

1. Bilder dynamisch erstellen

Bevor wir JavaScript verwenden, um die Position mehrerer Bildsätze zu ändern, müssen wir JavaScript verwenden, um Bilder dynamisch zu erstellen. Hier können wir DOM-Methoden verwenden, um HTML-Elemente zu erstellen und einzufügen.

Erstellen Sie zunächst einen Div-Container, verwenden Sie dann JavaScript, um das IMG-Tag dynamisch zu erstellen, legen Sie das src-Attribut und das Klassenattribut fest und fügen Sie schließlich das IMG-Tag in den Div-Container ein.

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

In diesem Code verwenden wir die Methode document.createElement(), um das img-Tag zu erstellen und das src-Attribut und das Klassenattribut festzulegen. Schließlich verwenden wir die Methode appendChild(), um das img-Tag in den angegebenen div-Container einzufügen.

2. Verwenden Sie CSS-Stile, um die Position des Bildes zu steuern.

Nachdem wir das Bild erstellt haben, können wir CSS-Stile verwenden, um die Position des Bildes zu steuern. Hier können wir die Positionierung des Bildes steuern, indem wir die Attribute „position“, „left“ und „top“ des img-Tags festlegen.

Angenommen, wir müssen die Bilder in zwei Gruppen aufteilen und jede Bildgruppe muss links und rechts auf der Seite nebeneinander angeordnet werden. Wir können das linke Attribut einer Bildgruppe auf 0 und das linke Attribut einer anderen Bildgruppe auf die Seitenbreite minus der Bildbreite setzen, sodass die beiden Bildgruppen auf der linken und rechten Seite platziert werden können Seite bzw.

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

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

In diesem Code verwenden wir den genauen Pixelwert und die Funktion calc(), um die left-Eigenschaft festzulegen. Die Funktion calc() kann einfache arithmetische Operationen ausführen, die uns dabei helfen können, die Bildposition genauer zu steuern.

3. Verwenden Sie JavaScript, um die Position des Bildes dynamisch zu ändern.

Wenn sich die Breite der Seite ändert, müssen Sie JavaScript verwenden, um die Position des Bildes dynamisch zu ändern. Wir können das window.onresize-Ereignis verwenden, um auf Änderungen der Seitenbreite zu warten und die Position des Bildes dynamisch zu ändern, wenn sich die Breite ändert.

Hier können wir JavaScript verwenden, um die Breite der Seite zu ermitteln und dann das linke Attribut des Bildes neu zu berechnen und zuzuweisen. Wir können die Methode querySelectorAll() verwenden, um alle Bildelemente abzurufen, und eine for-Schleife verwenden, um diese Elemente zu durchlaufen.

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";
        }
    }
}

In diesem Code verwenden wir das Attribut offsetWidth, um die Breite des Bildes zu ermitteln, und das Attribut clientWidth, um die Breite der Seite abzurufen. Dann berechnen wir den linken Attributwert von Bild 2 und verwenden eine for-Schleife, um alle img-Elemente zu durchlaufen, und legen das linke Attribut jedes Bildes entsprechend dem Klassennamen fest.

Fazit

Der obige Code implementiert die Funktion zum dynamischen Ändern der Positionen mehrerer Bildsätze mithilfe von JavaScript. Diese Technologie ist in der Frontend-Entwicklung weit verbreitet und kann uns dabei helfen, die visuellen Effekte der Seite genauer zu steuern.

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Position mehrerer Bildsätze in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!