H5实战-网易云音乐年度总结

ZXT
489 阅读4分钟

今天给大家带来HTML5的实战-网易云音乐年度总结

我们先来看看实现效果：优美的页面加上动听的音乐，加上自己的音乐回忆，立刻让人陷入深深的情绪之中。回想着自己的曾经。人们转发朋友圈后造成病毒式的传播，这就是前端的魅力，前端工程师是一个艺术家!

image.png

H5的开发与调试 我们要制作HTML5的页面时，作为大厂的前端工程师，我们的每一个页面都有可能被成千上万的人使用。这时候我们就该考虑考虑，我们该怎么使用什么尺寸的机器来调试页面呢？如何做到让网页在不同设备上展现最佳效果？ 在开发中，是通过设计稿尺寸来开发的，而标准的 iPhone 设计稿尺寸 通常是 375px（宽度），这是因为iPhone的物理宽度设定为750像素，开发人员在设计时通常会根据这个尺寸来进行设计稿的布局。但是，现代智能手机普遍采用 Retina屏 或 高清屏幕，这些屏幕的像素密度远高于普通屏幕，通常采用 2倍像素密度（2x）。因此，我们选择用375像素宽度的iphone SE模拟器来进行开发。

实现： 首先我们可以看到左上角有一个云音乐的按钮，当我们点击它时会播放音乐，并且图标会转变成音乐停止的图标。 我们先来添加背景音乐，可以用HTML的audio标签来添加

<audio id="j-bgm" src="./bgm.mp3" ></audio>

接着我们来实现左上角的音乐小图标，我们用一个盒子来装它，因为图标在点击时会进行切换，因此给它两个类名。

<div class="music-btn off"></div>

我们来添加CSS样式：设置不同的背景图片

.music-btn{
    z-index: 999;//设置盒子显示在最外层
    position: fixed;//固定定位
    top: 25px;
    left:25px;
    width: 40px;
    height: 40px;
    background: url(./assert/assert/close.png)  center / cover;  //设置居中，覆盖。
    //斜杠 `/` 在 CSS `background` 属性中起到分隔 **背景位置** 和 **背景大小** 的作用。它将 `background-position`（背景图像的位置）和 `background-size`（背景图像的尺寸）分开。
}


.music-btn.off{
    background-image: url(./assert/assert/music.png);
}

设置js属性。

 const aut = document.getElementById('j-bgm') // 选择一个音频元素
const musicBtn = document.querySelector('.music-btn') // 选择音乐按钮
let isPause = true // 记录音频是否暂停，初始时音频是暂停的

musicBtn.addEventListener('click', function() {
    if (isPause) { // 如果当前是暂停状态
        aut.play() // 播放音频
        isPause = false // 修改状态为播放
    } else { // 如果当前是播放状态
        aut.pause() // 暂停音频
        isPause = true // 修改状态为暂停
    }
    
    musicBtn.classList.toggle('off') // 切换按钮的样式，控制音符图标的切换
})

接着我们来设置滑页操作，就是像抖音的页面滑动一样，滑页操作。 首先我们引入Swiper库来实现这个效果，不必自己造轮子。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">

我们需要遵守其默认的规范： 最外层

  1. .swiper-container 是包含所有滑动内容的容器。

  2. 在 .swiper-container 内部，通常会有一个 .swiper-wrapper 容器，它包裹着多个 .swiper-slide 元素。每个 .swiper-slide 就是一个单独的幻灯片（可以是图片、文本、其他 HTML 元素等）。

    结构示例：

    <div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">幻灯片 1</div>
    <div class="swiper-slide">幻灯片 2</div>
    <div class="swiper-slide">幻灯片 3</div>
    <!-- 更多幻灯片 -->
  </div>
</div>

  3. .swiper-wrapper 容器是负责包裹所有幻灯片的容器。Swiper 会让 .swiper-wrapper 内的每个 .swiper-slide 元素按顺序展示，呈现为一个滑动区域。

  4. Swiper 会通过 JavaScript 动态管理这些 .swiper-slide 元素，实现滑动、切换、动画等效果。

.swiper-container{
    width: 100%;
    height: 100%;
}

.swiper-slide{
    background-color: green;
}

.swiper-slide:nth-child(odd){//伪类选择器，选择奇数的子元素
    background-color: pink;
}

接着只要初始化实例就好了

var swiper = new Swiper('.swiper-container', {
direction:'vertical'//设置垂直方向滑动
})

这样我们就实现了一个滑页效果。接着我们给每个滑页添加上效果和动画即可

<div class="swiper-slide">
<div class="view index">
<div class="logo-c"></div>
</div>
</div>

.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-size: cover;
background-position: center;
}

.logo-c{
    position: absolute;
    top: 5.6%;
    right: 15%;
    width: 128px;
    height: 218px;
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/title@2x.7c87506dfb012b9dfac5fdd39e2ccb06.png);
    background-size:100% ;
}

这样这个动画就实现了，最最最后，我们再来点小点缀 我们给图形的底部添加一个小烟花，告诉还能往下滑页。

    <div class="next-view-c"></div>

.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:20px;
    width: 13px;
    height: 86px;
    position: fixed;
    /* 页面的性能  开启后，gpu加速
    gpu利用显存计算页面的渲染
    */
    transform: translate3d(-50%,0,0);
}

注意哦，我们在设置他的位置平移时为什么不直接设置 translate(-50%,0)呢？这是因为1.translate3d 是一个3D转换函数，它可以利用GPU（图形处理器）来加速元素的渲染。相比之下，translate 是一个2D转换函数，它通常只能使用CPU来进行渲染。在支持硬件加速的设备上，使用 translate3d 可以显著提高动画和交互的性能。

avatar
文章
阅读
粉丝