Comment changer la position de plusieurs ensembles d'images en javascript

Dans le développement front-end, le traitement d'image est un élément essentiel. Plusieurs ensembles d'images doivent souvent être affichés sur les pages Web, et les positions de ces images doivent être modifiées de manière dynamique pour s'adapter aux changements de page. Dans ce cas, nous pouvons utiliser JavaScript pour modifier la position de plusieurs ensembles d'images.

1. Créer dynamiquement des images

Avant d'utiliser JavaScript pour modifier la position de plusieurs ensembles d'images, nous devons utiliser JavaScript pour créer dynamiquement des images. Ici, nous pouvons utiliser les méthodes DOM pour créer et insérer des éléments HTML.

Créez d'abord un conteneur div, puis utilisez JavaScript pour créer dynamiquement la balise img et définir l'attribut src et l'attribut class, et enfin insérez la balise img dans le conteneur 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>

Dans ce code, nous utilisons la méthode document.createElement() pour créer la balise img et définir l'attribut src et l'attribut class. Enfin, nous utilisons la méthode appendChild() pour insérer la balise img dans le conteneur div spécifié.

2. Utilisez les styles CSS pour contrôler la position de l'image

Après avoir créé l'image, nous pouvons utiliser les styles CSS pour contrôler la position de l'image. Ici, nous pouvons contrôler le positionnement de l'image en définissant les attributs position, left et top de la balise img.

Supposons que nous devions diviser les images en deux groupes et que chaque groupe d'images doive être disposé côte à côte sur les côtés gauche et droit de la page. Nous pouvons définir l'attribut gauche d'un groupe d'images sur 0 et l'attribut gauche d'un autre groupe d'images sur la largeur de la page moins la largeur de l'image, de sorte que les deux groupes d'images puissent être placés sur les côtés gauche et droit de la page. page respectivement.

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

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

Dans ce code, nous utilisons la valeur exacte du pixel et la fonction calc() pour définir la propriété left. La fonction calc() peut effectuer des opérations arithmétiques simples, ce qui peut nous aider à contrôler la position de l'image avec plus de précision.

3. Utilisez JavaScript pour modifier dynamiquement la position de l'image

Lorsque la largeur de la page change, vous devez utiliser JavaScript pour modifier dynamiquement la position de l'image. Nous pouvons utiliser l'événement window.onresize pour surveiller les changements de largeur de page et modifier dynamiquement la position de l'image lorsque la largeur change.

Ici, nous pouvons utiliser JavaScript pour obtenir la largeur de la page, puis recalculer et attribuer l'attribut gauche de l'image. Nous pouvons utiliser la méthode querySelectorAll() pour obtenir tous les éléments de l'image et utiliser une boucle for pour parcourir ces éléments.

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

Dans ce code, nous utilisons l'attribut offsetWidth pour obtenir la largeur de l'image, et l'attribut clientWidth pour obtenir la largeur de la page. Ensuite, nous calculons la valeur de l'attribut gauche de l'image 2, utilisons une boucle for pour parcourir tous les éléments img et définissons l'attribut gauche de chaque image en fonction du nom de classe.

Conclusion

Le code ci-dessus implémente la fonction de changement dynamique des positions de plusieurs ensembles d'images à l'aide de JavaScript. Cette technologie est très courante dans le développement front-end et peut nous aider à contrôler plus précisément les effets visuels de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!