缤纷浏览器 —— 一键换肤，个性随心换（H5实现浏览器换肤效果）

news2024/9/29 9:22:31

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

缤纷浏览器 —— 一键换肤，个性随心换
- 效果展示
- 1. 搭建网页框架
- 2. 搭建网页元素结构
- 3. 编写CSS样式
- 4. 编写点击事件
- 全部代码
- 🎉 往期精彩回顾

缤纷浏览器 —— 一键换肤，个性随心换

效果展示

想要给你的浏览器换上新装吗？来看看这个简单又实用的H5换肤效果吧！点击下方的图片，即可体验不同的浏览器皮肤，让你的浏览体验更加多彩。

在这里插入图片描述

线上访问地址：

缤纷浏览器换肤效果

1. 搭建网页框架

首先，我们创建一个基本的HTML文档结构，为后续的样式和脚本打下基础。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缤纷浏览器 —— 一键换肤，个性随心换</title>
</head>
<body>
    <!-- 网页内容将在这里添加 -->
</body>
</html>

2. 搭建网页元素结构

在<body>标签中，我们添加了一个包含多个<img>元素的<ul>列表，每个图片代表一种皮肤。

<body>
    <ul class="skin-list">
        <li><img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202310/245d0b716c34ec5ad25f203bad78a913--972850685.jpg" alt="Skin 1"></li>
        <li><img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202310/17e05efa4e03c4a62a9ef4dc8fbeb409--2755567652.jpg" alt="Skin 2"></li>
        <li><img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202310/b4384e8369039552446b4e0663c4c450--3317306650.jpg" alt="Skin 3"></li>
        <li><img src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202401/7653154ac8956eb8194325af063b032f--4006561019.jpg" alt="Skin 4"></li>
    </ul>
</body>

3. 编写CSS样式

接下来，我们为页面添加一些样式，使其看起来更加美观。同时，我们将添加一些表情包元素，增加页面的趣味性。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: url("http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202310/245d0b716c34ec5ad25f203bad78a913--972850685.jpg") no-repeat center center / cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Arial', sans-serif;
}

.skin-list {
    text-align: center;
    list-style: none;
    display: inline-block;
}

.skin-list li {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.skin-list li:hover {
    transform: scale(1.1);
}

.skin-list img {
    width: 100px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 添加表情包样式 */
表情包 {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 24px;
    color: #ff7f50;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

4. 编写点击事件

最后，我们为每个图片添加点击事件，当用户点击图片时，更改背景图片以实现换肤效果。

<script>
    // 获取所有图片元素
    var skins = document.querySelectorAll('.skin-list img');
    
    // 循环为每个图片注册点击事件
    skins.forEach(function(skin) {
        skin.addEventListener('click', function() {
            // 设置body的背景图片为被点击图片的src属性
            document.body.style.backgroundImage = 'url(' + this.src + ')';
        });
    });
</script>

全部代码

将以上HTML、CSS和JavaScript代码合并，即可得到完整的换肤效果页面。

<!DOCTYPE html>
<html lang="en">
<!-- Browser skin -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>缤纷浏览器 —— 一键换肤，个性随心换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202310/245d0b716c34ec5ad25f203bad78a913--972850685.jpg) no-repeat 0 0 / 100% 100% border-box border-box fixed;
        }

        li {
            list-style: none;
        }

        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }

        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }

        .baidu img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img
                src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202310/245d0b716c34ec5ad25f203bad78a913--972850685.jpg">
        </li>
        <li><img
                src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202310/17e05efa4e03c4a62a9ef4dc8fbeb409--2755567652.jpg">
        </li>
        <li><img
                src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202310/b4384e8369039552446b4e0663c4c450--3317306650.jpg">
        </li>
        <li><img
                src="http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202401/7653154ac8956eb8194325af063b032f--4006561019.jpg">
        </li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>