🌟 前言
欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白 ：个人主页
🏠 个人博客 ：洛可可白博客
🐱 代码获取 ：bestwishes0203
📷 封面壁纸 ：洛可可白wallpaper
文章目录
- [缤纷浏览器 ------ 一键换肤，个性随心换](#缤纷浏览器 —— 一键换肤，个性随心换)
缤纷浏览器 ------ 一键换肤，个性随心换
效果展示
想要给你的浏览器换上新装吗？来看看这个简单又实用的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>现在，你的浏览器换肤页面已经完成了！点击不同的图片，享受个性化的浏览体验吧。记得检查网络连接，确保图片资源可以顺利加载。如果你喜欢这个效果，不妨分享给你的朋友们，一起享受缤纷的网络世界！
如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀
🎉 往期精彩回顾
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收藏