不是吧？你还不知道网易云2018年年度听歌报告封面怎么设计吗？

Danta
192 阅读5分钟

你会怀念2018年的夏天吗？ 那个时候，我还没接触过前端，我的头发还茂盛。那么作为 2019 年第一个爆款刷屏 H5 项目，深深的吸引到了年少的我，如今的我，终于有能力去实现仿照做个封面哈哈，成品肯定实力还不够的。那就开始吧！

源码地址：

[lesson_hm/html5/163music at main · dantaKK/lesson_hm]

成果演示：

image.png

其他的暂时没实力搞，只能先做个封面，这个成品可以点击音乐后，就播放音乐，然后下面有个箭头可以进行滑页操作。

准备工作

首先呢，我们的工作肯定是在电脑上进行的，那么用户一般是在手机上看到我们的成品，而且不同的手机，它的大小还不一样，我们怎么去保证我们的成果能在不同的手机都能给用户优质的体验呢？难道把所有的手机都买了，然后一个去试吗？显然是不太行的，主流手机还可能去试试。

那么就有请我们网页的开发者模式了，我将用Microsoft Edge给大家做一下示例:

按F12或者鼠标右键点击检查，然后如图，先点击设备仿真，再选择尺寸iPhone SE,因为行业是以它为基准的。

屏幕截图 2024-11-24 141936.png

这样我们调整的样式，就是用户看到的。

代码讲解

源码在上面，我将讲讲难点：

文件分布：

image.png

1.HTML 结构：

  • 外部样式表：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<link rel="stylesheet" href="./common.css">

引入了Swiper的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>

next-view-c：一个固定的引导图标，提示用户向下滚动。

music-btn：音乐按钮，初始状态为关闭（off）。

swiper-container：Swiper容器，包含多个滑动页面（swiper-slide）

  • 外部脚本：

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

    引入了Swiper的JavaScript文件。

2.CSS结构：

全局重置

* {
    margin: 0;
    padding: 0;
}

作用：重置所有元素的默认边距和内边距，确保页面在不同浏览器中的一致性。

目的：避免浏览器默认样式带来的不一致性，确保页面布局的统一。

音乐按钮


.music-btn {
    z-index: 99;
    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);
}

  • .music-btn：

    • z-index: 99：设置层叠顺序，确保按钮在其他元素之上。
    • position: fixed：固定定位，按钮位置不会随页面滚动而变化。脱离了文档流。
    • top: 25px; left: 25px; ：设置按钮的位置，距离页面顶部和左侧各25px。
    • width: 40px; height: 40px; ：设置按钮的宽度和高度。
    • background：设置背景图像，使用no-repeat确保图像不重复，center / cover确保图像居中并覆盖整个按钮区域。

  • .music-btn.off：

    • background-image: url(./assert/music.png); ：当按钮处于关闭状态时，使用不同的背景图像。

Swiper 容器和滑动页面

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

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

.swiper-slide:nth-child(odd) {
    background-color: red;
}

  • .swiper-container：

    • width: 100%; height: 100%; ：设置Swiper容器的宽度和高度为100%，确保它占满整个视口。

  • .swiper-slide：

    • background-color: green; ：设置每个滑动页面的背景颜色为绿色。

  • .swiper-slide:nth-child(odd) ：

    • background-color: red; ：设置奇数索引的滑动页面的背景颜色为红色，以便区分不同的页面。

引导图标


.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;
    transform: translate3d(-50%, 0, 0);
}

  • .next-view-c：

    • z-index: 999：设置层叠顺序，确保图标在其他元素之上。也就是最上面
    • background：设置背景图像，使用url指定图像路径，background-size: 100%确保图像覆盖整个图标区域。
    • left: 50%; bottom: 10px; ：设置图标的位置，水平居中对齐，距离页面底部10px。
    • width: 13px; height: 86px; ：设置图标的宽度和高度。
    • position: fixed：固定定位，图标位置不会随页面滚动而变化。
    • transform: translate3d(-50%, 0, 0); ：使用3D变换进行水平居中对齐，提高动画性能，这一步可能会是面试题，会使 GPU 加速。

视图样式


.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: 186px;
    height: 218px;
    background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/title@2x.7c87506dfb012b9dfac5fdd39e2ccb06.png);
    background-size: 100%;
}

  • .view：

    • width: 100%; height: 100%; ：设置视图的宽度和高度为100%，确保它占满整个滑动页面。
    • overflow: hidden; ：隐藏超出视图的内容，防止内容溢出。

  • .view.index：

    • background：设置背景图像，使用url指定图像路径，background-size: cover确保图像覆盖整个视图区域，background-position: center确保图像居中对齐。
    • position: absolute; ：绝对定位，确保视图相对于其父元素定位。

  • .logo-c：

    • position: absolute; ：绝对定位，确保Logo相对于其父元素定位。
    • top: 5.6%; right: 15%; ：设置Logo的位置，距离顶部5.6%，右侧15%。
    • width: 186px; height: 218px; ：设置Logo的宽度和高度。
    • background：设置背景图像，使用url指定图像路径，background-size: 100%确保图像覆盖整个Logo区域。

3.JavaScript 逻辑结构：

 //dom 
    const audio = document.getElementById('j-bgm');
    // 选择器
    const musicBtn=document.querySelector('.music-btn');
    
    
    musicBtn.addEventListener('click',function(){
    if(audio.paused){
        audio.play();
    }
    else{
        audio.pause();
    }
    musicBtn.classList.toggle('off');
     
   
    })
    new Swiper('.swiper-container',{
        
        direction:'vertical',
       
    })

最后一步比较简单，分为：

  1. 获取DOM元素：获取音频元素和音乐按钮元素，用于后续的操作。
  2. 添加点击事件监听器：为音乐按钮添加点击事件监听器，控制音频的播放和暂停，并切换按钮的状态。
  3. 初始化Swiper：创建一个垂直方向的Swiper实例，实现页面内容的垂直滑动效果。

结语：

可能最后只实现了一点点效果吧，还需要继续努力学习呀！

如果有问题请指出，本文如果对你有帮助也请点个赞，谢谢你的观看。

avatar
文章
阅读
粉丝