遇见你真好--网易云h5页面 , 来场音乐的视觉盛宴

浪遏
380 阅读6分钟

效果展示

网易云.gif

源码地址

gitee.com/luli1314520…

概述

打造一个类似网易云音乐年终总结的H5页面，主要涉及音乐播放、滑页效果以及层的堆叠等功能的实现，并针对开发过程中可能遇到的问题进行分析与解决。通过代码与注释相结合的方式，详细讲解各个功能的实现逻辑以及相关注意事项。

功能实现

（一）音乐播放功能

  1. 获取元素
    • 首先，通过document.getElementById('-bgm')获取到音频元素audio，用于后续对音频的操作，如播放、暂停等。
    • 再通过document.querySelector('.music-btn')获取到音乐播放与关闭按钮元素musicBtn，这个按钮用于触发音乐播放和暂停的操作。
  1. 添加点击事件处理函数
    • 使用musicBtn.addEventListener('click', function() {...})为音乐按钮添加点击事件监听器。
    • 在点击事件处理函数中，通过判断音频的当前状态（暂停或播放）来执行相应操作。如果音频当前是暂停状态（audio.paused为true），则调用audio.play()播放音频；否则调用audio.pause()暂停音频。
    • 同时，每次点击按钮时，还会通过musicBtn.classList.toggle('off')切换按钮的样式，实现音乐播放和暂停状态的视觉反馈。例如，当音乐播放时，按钮显示为暂停图标；当音乐暂停时，按钮显示为播放图标。

（二）滑页操作功能

  1. 引入Swiper库
    • 在页面中通过<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>引入Swiper库的JavaScript文件，Swiper是一个流行的滑动库，用于实现流畅的滑动效果。
  1. 初始化Swiper实例
    • 使用new Swiper('.swiper-container', { direction:'vertical' })初始化一个垂直方向的Swiper实例。这里的.swiper-container是滑动容器的类名，通过指定direction:'vertical'，实现垂直滑页效果。这样，用户就可以在手机上通过上下滑动来切换页面内容。

（三）层的堆叠

  1. 定位与堆叠顺序设置
    • 在CSS样式中，对于一些元素（如音乐按钮和页面指示器等）设置了position: fixed，使其相对于视口固定位置。
    • 同时，为这些元素设置了较高的z-index值（如z-index: 999），以确保它们在堆叠顺序中处于较高位置，能够覆盖在其他普通元素之上。例如，音乐按钮位于页面的左上角，无论页面如何滑动，它都始终可见并且可以被点击操作。
    • 对于页面指示器，通过z-index: 999和position: fixed等样式设置，使其固定在页面底部适当位置，为用户提供滑动页面的指示。

常见问题解析

（一）音乐图标不见了

  1. 问题原因
    • 可能是由于层的堆叠顺序问题导致音乐图标被其他元素覆盖。如果有元素的z-index值比音乐图标的z-index值更高，且位置重叠，就会出现音乐图标不可见的情况。
  1. 解决方法
    • 检查相关元素的z-index设置，确保音乐图标所在元素的z-index值足够高，使其能够显示在其他可能覆盖它的元素之上。例如，可以将音乐图标元素的z-index设置为一个较大的值（如999），使其处于较高的堆叠层级。

（二）不知道是否滑动了

  1. 问题原因
    • H5页面在手机上滑动时，如果没有视觉反馈或其他指示，用户可能难以感知页面是否成功滑动。
  1. 解决方法
    • 为页面添加页面指示器。如在本项目中，通过<div class="next-view-c"></div>元素并设置相应的CSS样式（包括背景图像、位置、大小等）来实现页面指示器。当用户滑动页面时，指示器可以提供一个视觉提示，让用户知道页面正在滑动以及滑动的方向。

（三）选择器的使用（id选择器和class选择器）

  1. id选择器特点与适用场景
    • id选择器（如document.getElementById()）通过元素的唯一id来获取元素。它的优点是速度快，因为id在页面中应该是唯一的。适用于获取页面中唯一的、具有特定功能或重要性的元素，例如音频元素（id='-bgm'），因为在一个页面中通常只有一个音频需要进行播放控制。
  1. class选择器特点与适用场景
    • class选择器（如document.querySelector('.music-btn')）通过元素的类名来获取元素。它可以选择多个具有相同类名的元素，适用于对一组具有相同样式或行为的元素进行操作。例如，页面中可能有多个按钮都具有music-btn类名，通过class选择器可以方便地获取这些按钮并统一添加事件处理函数或样式。

（四）其他注意事项

  1. 高清屏幕适配
    • 手机使用的是retina屏（高清屏幕），1个发光源pt（物理宽度）有2个像素（2px）。设计稿宽度为750px，而在手机上实际的发光源宽度为375。在开发过程中需要考虑这种高清屏幕适配问题，确保页面元素的显示效果清晰、准确。
  1. 用户体验细节
    • 考虑到用户体验，近几年网页不允许直接播放音乐，需要通过JavaScript来处理音乐播放相关逻辑，以更好地控制音乐播放的时机和方式，避免给用户带来不好的体验。例如，在本项目中通过点击音乐按钮来触发音乐播放和暂停操作，并且提供了明确的视觉反馈（音乐图标切换）。

代码附录

<!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标签引入swiper.min.css样式 ()-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <!-- 使用link标签引入./common.css样式 -->
    <link rel="stylesheet" href="./common.css">
   
    <style>
        *{
            margin: 0; 
            padding: 0;
        }/*清除默认样式*/
 
        /* .box{
            width:375;
            height:375px;
            background-color:red;
        } */
    </style>
</head>
<body>
    <!-- 再次引入swiper.min.css样式的js文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <!-- audio不会占用文档流 -->
    <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>
                <div class="view index">
                    <div class="logo-c"></div>
                </div>         
            <div class="swiper-slide"></div>                    
        </div>
    </div>
    <script>
        //1.实现音乐的播放与关闭

        //dom操作
        const audio =document.getElementById('j-bgm');
        const musicBtn =document.querySelector('.music-btn');
        const isMusicPause = true;
        //js是基于事件驱动的语言,当我们点击的时候才会触发事件
        musicBtn.addEventListener('click',function(){
            // if(true){
            //     audio.play();
            //     isMusicPause = false;
            // }else{
            //     audio.pause();
            //     isMusicPause = true;
            // }
            if(audio.paused){
                audio.play();
            }else{
                audio.pause();
            }
            musicBtn.classList.toggle('off') //切换样式 .music-btn to off
        })

        //2.实现滑页操作
        new Swiper('.swiper-container',{
            direction:'vertical'//垂直滑页
        })

    </script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

html,body {
    height: 100%;
    width: 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;
}

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

/*单屏 滑屏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:10%;
    width:13px;
    height:86px;
    position: fixed;
    /*网页的性能: transform3d 会开启 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) no-repeat;
    position: absolute;
    background-position:center;
    /* 等比缩放 */
    background-size: cover;
}


.logo-c {
    position: absolute;
    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%;
  }

/* http://s5.music.126.net/static_public/5c21db8d4684556c72180904/bgg.d78404cec29e5275598b87d1716f0592.png */
avatar
文章
阅读
粉丝