JavaScript to achieve skin effect (change background)

This article shares the specific code of JavaScript to achieve skin-changing effect for your reference. The specific content is as follows

Skin-changing effect: Click on different pictures to change the background of the corresponding page

Implementation ideas

1. Define a set of pictures, and assign the background picture path to each src attribute
2. Get a set of picture element objects (get a pseudo array)
3. The for loop binds the click event - - -onclick to the picture. In the event handler, the background image of the body element object is set to - - -the path of the currently clicked picture.
4. Note: The object of body element is obtained as - - -document.body, js is assigned the path of background image. Note the concatenation of the path - - -document.body.style.backgroundImage = 'url(' + this.src + ')';

Code Sample

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skin effect</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: url(images/壁纸1.jpg) no-repeat center top;
            background-size: cover;
        }
        
        .box {
            overflow: hidden;
            width: 610px;
            margin: 100px auto;
            background-color: #fff;
        }
        
        .box li {
            width: 25%;
            height: 100px;
            list-style: none;
            float: left;
            cursor: pointer;
            border: 1px solid #fff;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li><img src="images/壁纸1.jpg" alt=""></li>
        <li><img src="images/壁纸2.jpg" alt=""></li>
        <li><img src="images/壁纸3.jpg" alt=""></li>
        <li><img src="images/壁纸4.jpg" alt=""></li>
    </ul>
    <script>
        var pics = document.querySelector('.box').querySelectorAll('img');
        console.log(pics);
        for (var i = 0; i < pics.length; i++) {
            pics[i].onclick = function() {
                console.log(this.src);
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

Page Effects

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Native JavaScript to achieve skinning
Detailed explanation of the method of implementing skin changing function in JS
js Dom realizes skin changing effect
Example of using jQuery combined with jQuery.cookie.js plug-in to implement skinning function
JavaScript to implement skin changing function
js to simply implement web page skinning function
js to achieve simple web page skinning effect
AngularJS website skinning example
js+css to simply achieve web page skinning effect
js dynamically modifies the entire page style to achieve skin-changing effect

<<: MySQL grouping queries and aggregate functions

>>: Analysis of Apache's common virtual host configuration methods

How to implement a multi-terminal bridging platform based on websocket in JS

JavaScript to achieve skin effect (change background)

Implementation ideas

Code Sample

Page Effects

How to implement a multi-terminal bridging platform based on websocket in JS

Use CSS content attr to achieve mouse hover prompt (tooltip) effect

The difference between VOLUME and docker -v in Dockerfile

Specific method of viewing user authorization information in mysql

How to implement second-level scheduled tasks with Linux Crontab Shell script

JavaScript to achieve simple drag effect

Advanced crawler - Use of Scrapy_splash component for JS automatic rendering

How to install Odoo12 development environment on Windows 10

What are the benefits of using B+ tree as index structure in MySQL?

Echarts legend component properties and source code

Recommend

How to set the user root password and remote connection method for Alibaba Cloud ECS instance

Analyze the problem of transferring files and other parameters in the upload component of element-ui

Detailed explanation of MySQL database triggers

JavaScript to implement checkbox selection or cancellation

Detailed explanation of the correct use of the count function in MySQL

Detailed explanation of the Sidecar mode in Docker Compose

Solution to primary key conflict when innodb_index_stats reports an error when importing backup data

JavaScript implements draggable progress bar

base target="" specifies the target of the base link to open the frame

A brief discussion on four solutions for Vue single page SEO

Detailed explanation of the binlog log analysis tool for monitoring MySQL: Canal

HTML design pattern daily study notes

Parsing Apache Avro Data in One Article

Detailed explanation of Excel parsing and exporting based on Vue

Web Design Tutorial (1): Steps and Overall Layout