How to change the position of multiple groups of pictures in javascript

In front-end development, image processing is an essential part. Multiple sets of pictures often need to be displayed on web pages, and the positions of these pictures need to be dynamically changed to adapt to page changes. In this case, we can use JavaScript to change the position of multiple sets of images.

1. Dynamically create pictures

Before using JavaScript to change the position of multiple groups of pictures, we need to use JavaScript to dynamically create pictures. Here we can use DOM methods to create and insert HTML elements.

First create a div container, then use JavaScript to dynamically create the img tag and set the src attribute and class attribute, and finally insert the img tag into the div container.

<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 this code, we use the document.createElement() method to create the img tag and set the src attribute and class attribute. Finally, we use the appendChild() method to insert the img tag into the specified div container.

2. Use CSS styles to control the position of the image

After creating the image, we can use CSS styles to control the position of the image. Here, we can control the positioning of the image by setting the position, left, and top attributes of the img tag.

Suppose we need to divide the pictures into two groups, and each group of pictures needs to be arranged side by side on the left and right sides of the page. We can set the left attribute of one group of pictures to 0, and the left attribute of another group of pictures to the page width minus the picture width, so that the two groups of pictures can be placed on the left and right sides of the page respectively.

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

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

In this code, we use the exact pixel value and the calc() function to set the left attribute. The calc() function can perform simple arithmetic operations, which can help us control the image position more accurately.

3. Use JavaScript to dynamically change the position of the image

When the width of the page changes, you need to use JavaScript to dynamically change the position of the image. We can use the window.onresize event to listen for changes in page width and dynamically change the position of the image when the width changes.

Here, we can use JavaScript to get the width of the page, and then recalculate and assign the left attribute of the image. We can use the querySelectorAll() method to get all image elements and use a for loop to traverse these elements.

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 this code, we use the offsetWidth attribute to get the width of the image, and the clientWidth attribute to get the width of the page. Then, we calculate the left attribute value of picture 2, and use a for loop to traverse all img elements, and set the left attribute of each picture according to className.

Conclusion

The above code implements the function of dynamically changing the positions of multiple groups of pictures using JavaScript. This technology is very common in front-end development and can help us control the visual effects of the page more accurately.

The above is the detailed content of How to change the position of multiple groups of pictures in javascript. For more information, please follow other related articles on the PHP Chinese website!