JavaScript to achieve skin effect (change background)

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

Recommend

Nginx http health check configuration process analysis

Passive Check With passive health checks, NGINX a...

How to install setup.py program in linux

First execute the command: [root@mini61 setuptool...

Implementation of CSS circular hollowing (coupon background image)

This article mainly introduces CSS circular hollo...

Implementing a simple timer based on Vue method

Vue's simple timer is for your reference. The...

The vue configuration file automatically generates routing and menu instance code

Table of contents Written in front router.json Ro...

Docker builds jenkins+maven code building and deployment platform

Table of contents Docker Basic Concepts Docker in...

The process of installing MySQL 8.0.26 on CentOS7

1. First, download the corresponding database fro...

MySQL 5.7.18 zip version installation tutorial

The mysql 5.7.18 zip version of MySQL is not like...

The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands

What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...

Docker modifies the configuration information of an unstarted container

When I first used docker, I didn't use docker...

How to optimize MySQL query speed

In the previous chapters, we introduced how to ch...

Complete steps to implement location punch-in using MySQL spatial functions

Preface The project requirement is to determine w...

Detailed explanation of Mysql function call optimization

Table of contents Function call optimization Func...

Vue must learn knowledge points: the use of forEach()

Preface In front-end development, we often encoun...

Detailed examples of using JavaScript event delegation (proxy)

Table of contents Introduction Example: Event del...