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

🌟 前言

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

🤖 洛可可白 ：个人主页

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

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

🐱 代码获取 ：bestwishes0203

📷 封面壁纸 ：洛可可白wallpaper

文章目录

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

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

效果展示

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

线上访问地址：

缤纷浏览器换肤效果

1. 搭建网页框架

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

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>列表，每个图片代表一种皮肤。

html 复制代码

<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样式

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

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. 编写点击事件

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

js 复制代码

<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代码合并，即可得到完整的换肤效果页面。

html 复制代码

<!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>

现在，你的浏览器换肤页面已经完成了！点击不同的图片，享受个性化的浏览体验吧。记得检查网络连接，确保图片资源可以顺利加载。如果你喜欢这个效果，不妨分享给你的朋友们，一起享受缤纷的网络世界！

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）

468阅读 · 19点赞 · 14收藏
计算机专业学生的成长之路：超越课堂的自我提升策略

479阅读 · 16点赞 · 16收藏
Node.js快速入门：搭建基础Web服务器与实现CRUD及登录功能

814阅读 · 26点赞 · 13收藏
Node.js核心命令与工具：提升开发效率的实用指南

446阅读 · 9点赞 · 16收藏
爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析

1096阅读 · 17点赞 · 30收藏
打造精美响应式CSS日历：从基础到高级样式

1048阅读 · 13点赞 · 19收藏