手把手教你做网易云H5页面，进大厂后干的第一件事

引言

网易云音乐作为国内领先的音乐流媒体平台，它的H5网页值得所有前端程序员去模仿和学习。今天，我们就从零开始，以网易云练手，创建一个简单H5页面，要求能够实现基本的背景音乐的播放和上下滑动功能。通过这个项目，你将学会如何使用HTML、CSS和JavaScript来构建一个响应式和交互性强的H5页面。没准这就是你进入大厂后干的第一件事！！！

先来看看我们的最终成果

模拟器选择

调试方法分为本地调试和真机调试，没有实力进行真机调试，来使用本地调试。在本地调试中，我们可以在开发早期阶段快速验证页面布局、功能和性能，确保页面在不同设备上的表现符合预期。调试时，切换到手机形式，手机型号选择iPhone SE。在开发过程中，一般的设计稿总是750px。

简单介绍一下pt 和px

pt（物理像素） ：相当于我们用浏览器来模拟移动端所看到的手机像素
px（逻辑像素） ：屏幕上显示数据的最基本的点，单个像素没有具体的尺寸概念

在手机常用的Retina 高清屏中，1pt=2px，可以看到iPhone SE正是375pt，也就是750px，所以我们在调试时一般选择iPhone SE

背景音乐控制

我们先来设计页面左上角的背景音乐控制功能

html：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐年终总结h5</title>
    <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/title@2x.7c87506dfb012b9dfac5fdd39e2ccb06.png) no-repeat;
       background-size: 100%;
   }

总结

到现在，我们已经成功完成了一个简单的网易云h5手机网页。在这个项目中，我们学会了如何使用HTML、CSS和JavaScript来实现背景音乐播放和上下滑动功能。此外，我们还了解了如何使用Swiper库来实现页面的滑动效果，以及如何通过CSS来优化页面的性能和视觉效果。

希望这个项目能为你提供一些实用的前端开发经验，帮助你在未来的项目中更加得心应手。如果你有任何问题或建议，欢迎在评论区留言交流！