案例：网页换肤

最新推荐文章于 2024-08-02 12:19:30 发布

余生94ww

最新推荐文章于 2024-08-02 12:19:30 发布

阅读量84

点赞数

文章标签： css html css3 sass javascript

本文链接：https://blog.csdn.net/ww_Filling_it/article/details/124907799

版权

<!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>百度换肤</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            box-sizing: border-box;
            padding-top: 80px;
            width: 100vw;
            min-height: 100vh;
            background-color: gold;
            background-size: 100% 100vh;
            background-position: center center;
            /* 背景图不跟随滚动 */
            background-attachment: fixed;
        }

        .content {
            height: 2000px;
            background-color: pink;
            width: 50px;
            margin: 0 auto;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100vw;
            height: 60px;
            background-color: rgba(0, 0, 0, .35);
            color: #fff;
        }

        nav p {
            float: right;
            margin-right: 50px;
            height: 60px;
            line-height: 60px;
            font-size: 14px;
        }

        nav p:hover {
            cursor: pointer;
        }

        .alert {
            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            z-index: 1;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, .1);
        }

        .card {
            padding: 0 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            position: relative;
            width: 920px;
            height: 320px;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 5px lightgray;
        }

        .card img {
            width: 180px;
            /* height: 40px; */
            border-radius: 4px;
            box-shadow: 0 0 3px #ccc;
            transition: .3s;
        }

        .card img:hover {
            cursor: pointer;
            transform: scale(1.2);
            box-shadow: 0 0 3px #999;
        }

        .close {
            position: absolute;
            right: 30px;
            top: 30px;
            font-size: 20px;
            color: lightgray;
        }


        .close:hover,
        .no:hover {
            cursor: pointer;
            color: cornflowerblue;
        }

        .no {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: lightgray;
            text-align: center;
        }

        .checked {
            outline: 4px solid turquoise;
        }
    </style>
</head>

<body>
    <nav>
        <p>更换皮肤</p>
    </nav>
    <div class="alert">
        <div class="card">
            <span class="close">X</span>
            <span class="no">不使用皮肤</span>
            <img src="https://t7.baidu.com/it/u=508006830,4042443322&fm=193&f=GIF" alt="">
            <img src="https://t7.baidu.com/it/u=3029654684,900514866&fm=193&f=GIF" alt="">
            <img src="https://t7.baidu.com/it/u=1451800419,4152544319&fm=193&f=GIF" alt="">
            <img src="https://t7.baidu.com/it/u=4272803060,4157549139&fm=193&f=GIF" alt="">
            <img src="https://t7.baidu.com/it/u=604672937,615186004&fm=193&f=GIF" alt="">
        </div>
    </div>
    <div class="content">
        这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content这里是content
    </div>
</body>
<script>
    var dAlert = document.querySelector(".alert");
    var p = document.querySelector("nav p");
    var spanClose = document.querySelector(".close");
    var pNo = document.querySelector(".no");
    var imgs = document.querySelectorAll("img");
    var body = document.querySelector("body");
    //当前显示图片的img下标，如果为-1，则代表没有背景图
    var index = -1;
    for (var i = 0; i < imgs.length; i++) {

        imgs[i].xiabiao = i;
        //分别添加点击事件
        imgs[i].onclick = function () {
            //如果点击的是已经显示的背景图片就结束函数
            if (index === this.xiabiao) {
                return;
            }
            console.log(this.xiabiao)
            // this 指向函数的拥有者
            body.style.backgroundImage = `url(${this.src})`;
            //找到上一个拥有outline的img，把他去掉
            //1.暴力解除
            // for(var j=0;j<imgs.length;j++){
            //     imgs[j].className = "";
            // }
            // 2.下标

            if (index != -1) {
                imgs[index].className = "";
            }
            //修改被点击的img的outline
            this.className = "checked";
            //修改index的值
            index = this.xiabiao;
        }
    }
    //给p添加点击事件
    p.onclick = function () {
        dAlert.style.display = "flex";
    }
    //给span添加点击事件
    spanClose.onclick = function () {
        dAlert.style.display = "none";
    }
    //给no添加点击事件
    pNo.onclick = function () {
        body.style.backgroundImage = '';
        imgs[index].className = '';
        index = -1;
    }
</script>

</html>

案例结果如下：

余生94ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例：网页换肤

<!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>百.
复制链接

扫一扫