JS浏览器换肤

2023-10-03 19:04:04
核心：把当前图片的路径取出来给body做背景
遇到的问题：
在JS注册事件的时候，图片点击没有效果，原因，这是由于上面加了一个mask的div盒子，所以点击不起作用
<!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>Document</title>
    <style>
        .box {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            background-color: white;
        }
        
        button {
            width: 36px;
            height: 36px;
            background-color: white;
            border: none;
            position: absolute;
            top: 20px;
            right: 20px;
            background-image: url('关闭.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
        }
        
        h1 {
            padding-top: 60px;
        }
        
        h1,
        p {
            padding-left: 120px;
        }
        
        li {
            list-style: none;
            width: 470px;
            height: 274px;
            display: inline-block;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 10px;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
        }
        
        ul {
            text-align: center;
        }
        
        .mask {
            display: none;
            background: rgba(0, 0, 0, 0.3);
            width: 470px;
            height: 274px;
            position: absolute;
            top: 0px;
            left: 0px
        }
        /* li:hover .mask {
            display: block
        } */
        
        body {
            background-image: url(https://pr1-greenteacdn.lenovo.com.cn/config/1608864154169_rhaul-v-alva-jCM48W7y6Y8-unsplash.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        
        .xuanz {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0px;
            right: 0px;
            /* display: none; */
            background-image: url('按钮_选中_o.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100%;
            display: none
        }
        
        li img {
            width: 100%;
            /* position: absolute;
            top: 0px;
            left: 0px */
        }
    </style>
</head>

<body>
    <!-- 换肤界面，鼠标经过每个图片，就会给图片加上蒙版，点击某个图片之后，图片下面显示勾选图标，并且页面背景换成该图片的背景 -->
    <!-- 首先是一个大的div里面装了很多图片 -->
    <div class="box">
        <!-- div右上角有一个关闭按钮，点击后div不显示，即不进行换肤选择 div里面的内容是根据图片的数量来自动撑开的-->
        <h1>节日</h1>
        <p>6款皮肤</p>
        <button></button>
        <!-- 放入图片 -->
        <ul>
            <li>
                <img src="https://pr1-greenteacdn.lenovo.com.cn/config/1623402025269_端午-小.jpg" alt="">
                <div class="mask"></div>
                <div class="xuanz">
                </div>
            </li>
            <li>
                <img src="https://pr1-greenteacdn.lenovo.com.cn/config/1632987652196_微信图片_20210930153942.jpg" alt="" class="pif">
                <div class="mask"></div>
                <div class="xuanz">
                </div>
            </li>
            <li>
                <img src="https://pr1-greenteacdn.lenovo.com.cn/config/1619683108807_work.jpg" alt="" class="pif">
                <div class="mask"></div>
                <div class="xuanz">
                </div>
            </li>
            <li>
                <img src="https://pr1-greenteacdn.lenovo.com.cn/config/1614567664440_小图.jpg" alt="" class="pif">
                <div class="mask"></div>
                <div class="xuanz">
                </div>
            </li>
            <li>
                <img src="https://pr1-greenteacdn.lenovo.com.cn/config/1609322089805_5.png" alt="" class="pif">
                <div class="mask"></div>
                <div class="xuanz">
                </div>
            </li>
            <li>
                <img src="https://pr1-greenteacdn.lenovo.com.cn/config/1609321912986_未标题-3.png" alt="">
                <div class="mask"></div>
                <div class="xuanz">
                </div>
            </li>
        </ul>
    </div>
    <script>
        //按钮。div大盒子；背景图片更改
        var btn = document.querySelector('button')
        var box = document.querySelector('.box')
        var p = document.querySelector('p')
        var img = document.querySelectorAll('img')
        var mask = document.querySelectorAll('.mask')
        btn.onclick = function() {
            box.style.display = 'none'
        }
        var xuanz = document.querySelectorAll('.xuanz')

        var body = document.body
            // console.log(img[0].src)
            // 图片更改
            // var body = document.body
            // var xuanz = document.querySelectorAll('.xuanz')
            //xuanz,li也是一个伪数组
        for (var i = 0; i < img.length; i++) {
            img[i].onclick = function() {
                //因为this.src是一个变量，因此需要采用字符串串联的（引引加加）方式书写背景的url
                //url里面不加引号
                //属性都是以字符串的形式出现
                body.style.backgroundImage = 'url(' + this.src + ')'

                // console.log(i) //?为什么i总是等于6//从0-5开始遍历，看那个被点击，最后遍历完成后i=6
                xuanz.style.display = 'block'
            }
        }
    </script>
</body>

</html>
未完成：当选定某一个皮肤后，勾选图标不知道怎么显示
码农公寓

相关文章
