引言
网易云音乐作为国内领先的音乐流媒体平台，它的H5网页值得所有前端程序员去模仿和学习。今天，我们就从零开始，以网易云练手，创建一个简单H5页面，要求能够实现基本的背景音乐的播放和上下滑动功能。通过这个项目，你将学会如何使用HTML、CSS和JavaScript来构建一个响应式和交互性强的H5页面。没准这就是你进入大厂后干的第一件事！！！
先来看看我们的最终成果
模拟器选择
调试方法分为本地调试和真机调试，没有实力进行真机调试，来使用本地调试。 在本地调试中，我们可以在开发早期阶段快速验证页面布局、功能和性能，确保页面在不同设备上的表现符合预期。 调试时，切换到手机形式，手机型号选择iPhone SE。在开发过程中，一般的设计稿总是750px。
简单介绍一下pt和px
- pt（物理像素） ：相当于我们用浏览器来模拟移动端所看到的手机像素
- px（逻辑像素） ：屏幕上显示数据的最基本的点，单个像素没有具体的尺寸概念
在手机常用的Retina 高清屏中，1pt=2px，可以看到iPhone SE正是375pt，也就是750px，所以我们在调试时一般选择iPhone SE
背景音乐控制
我们先来设计页面左上角的背景音乐控制功能
html：
html 代码解读复制代码html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易云音乐年终总结h5title>
<link rel="stylesheet" href="./common.css">
head>
<body>
// 引入一段任意的背景音乐
<audio id="j-bgm" src="./bgm.mp3">audio>
// 在css中，将会给music-btn添加背景图片，来显示背景音乐的情况
// 功能分开 music-btn播放 off未播放
<div class="music-btn off">div>
<script>
// dom 选取音频
const audio = document.getElementById('j-bgm');
// 选取music-btn
const musicBtn = document.querySelector('.music-btn');
// 事件绑定 添加点击事件，点击图标后背景音乐开关切换
// 浏览器默认关闭音频
musicBtn.addEventListener('click', function () {
if (audio.paused) { //点击后检查音频是否播放
audio.play(); // 打开音频
} else {
audio.pause(); // 关闭音频
}
// 如果 off 类值已存在，则移除它，否则添加它（切换背景图片）
musicBtn.classList.toggle('off');
})
script>
body>
html>
css：
css 代码解读复制代码 * {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.music-btn { // 打开标志
z-index: 999; // 将层叠等级提高，不然会给页面增加背景时会被挡住
position: fixed; // 固定定位，让图标始终出现在左上角
top: 25px;
left: 25px;
width: 40px;
height: 40px;
background: url(../assert/close.png) no-repeat center / cover;
// no-repeat不重复
// center水平垂直方向居中
// cover将背景图片按原宽高比进行缩放，以保证图片完全覆盖元素
}
.music-btn.off { //关闭标志
background-image: url(../assert/music.png);
}
关闭状态：
打开状态：
滑动功能
现在来开始实现上下滑动的功能，并且添加能够滑动的提示，为首页添加图片和网易云的文字 html：
html 代码解读复制代码 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<audio id="j-bgm" src="./bgm.mp3">audio>
<div class="next-view-c">div>
<div class="music-btn off">div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="view index">
<div class="logo-c">div>
div>
div>
<div class="swiper-slide">div>
<div class="swiper-slide">div>
<div class="swiper-slide">div>
<div class="swiper-slide">div>
div>
div>
// 引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js">script>
<script>
// 滑屏
new Swiper('.swiper-container', {
direction: 'vertical'
})
script>
css:
css 代码解读复制代码/* 单屏 滑屏h5 效果 */
.swiper-container {
width: 100%;
height: 100%;
//设置所有页背景颜色
.swiper-slide {
background-color: green;
}
// 改变奇数页背景颜色
.swiper-slide:nth-child(odd) {
background-color: pink;
}
// 网易云文字部分
.next-view-c {
z-index: 999;
// 向下滑动提示
background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/gx.4ae36e08269404412ecdb99e9453ca17.svg);
//设置图片大小
background-size: 100%;
left: 50%;
bottom: 10px;
width: 13px;
height: 86px;
position: fixed; //固定定位
/* 小细节 */
/* 网页的性能 translate3d 会开启 GPU加速 GPU 利用显存计算页面 速度更快 */
transform: translate3d(-50%, 0, 0);
}
.view {
width: 100%;
height: 100%;
overflow: hidden;
}
.view.index {
// 首页背景图片
background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/bgg.d78404cec29e5275598b87d1716f0592.png);
position: absolute; //绝对定位，相对于上一级有定位的元素
background-position: center;
background-size: cover;
}
.logo-c {
position: absolute; // 这里相对于.view
top: 5.6%;
right: 15%;
width: 186px;
height: 218px;
// 网易云文字
background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/[email protected]) no-repeat;
background-size: 100%;
}
总结
到现在，我们已经成功完成了一个简单的网易云h5手机网页。在这个项目中，我们学会了如何使用HTML、CSS和JavaScript来实现背景音乐播放和上下滑动功能。此外，我们还了解了如何使用Swiper库来实现页面的滑动效果，以及如何通过CSS来优化页面的性能和视觉效果。
希望这个项目能为你提供一些实用的前端开发经验，帮助你在未来的项目中更加得心应手。如果你有任何问题或建议，欢迎在评论区留言交流！
评论记录：
回复评论：