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

前端
字数统计: 1.2k   |   阅读时长≈ 6 分钟

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

效果展示

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

线上访问地址：

缤纷浏览器换肤效果

1. 搭建网页框架

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

1
2
3
4
5
6
7
8
9
10
11
<!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>列表，每个图片代表一种皮肤。

1
2
3
4
5
6
7
8
<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样式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
* {
    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. 编写点击事件

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

1
2
3
4
5
6
7
8
9
10
11
12
<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代码合并，即可得到完整的换肤效果页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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>

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

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

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022-2024 何福海
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信