写个网易H5开开荤

最新推荐文章于 2025-06-25 21:05:33 发布

wayhome在哪

最新推荐文章于 2025-06-25 21:05:33 发布

阅读量1.1k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： AI全栈文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/Cwayhome/article/details/144029468

AI全栈专栏收录该内容

16 篇文章

订阅专栏

H5（HTML5）页面是一种基于HTML5技术的互动性强的网页应用，常用于手机端的分享和传播。H5页面的特点在于其高互动性和良好的用户体验，非常适合病毒式的传播，尤其是在社交媒体上。今天就来写个网易的H5页面开开荤。效果如下：
在这里插入图片描述

1. 源码

1.1 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="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="./common.css">
    <style>
    </style>
</head>
<body>
    <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>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script>
        // 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',
        })
    </script>
    <div class="box"></div>
</body>
</html>

1.2 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;
}

.music-btn.off{
    background-image: url(./assert/music.png);
}
/*单屏 滑屏h5 效果*/
.swiper-container{
    width:100%;
    height:100%;
}

.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);
}
.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) no-repeat;
    background-size: 100%;
}

2. 细节解读

2.1 模拟器

本地调试
- 设计稿的尺寸：标准iPhone手机的设计稿尺寸通常是750px（宽度）。对于iPhone SE等较小的屏幕，需要适配不同的分辨率。
- Retina屏幕：现代手机屏幕通常是Retina屏幕，即1个物理点（pt）对应多个像素（通常为2px）。因此，在设计和开发时需要考虑高清屏幕的显示效果。
真机调试
- 在实际开发过程中，建议使用真机进行调试，以确保页面在不同设备上的表现一致。

2.2 div class=“view index”

在HTML中，给一个元素同时指定多个类名（例如 <div class="view index">）是一种常见的做法，有多种用途和好处。

样式组合

通过使用多个类名，可以将不同的样式规则组合在一起，从而更灵活地控制元素的样式。

.view {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.index {
   background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/bgg.d78404cec29e5275598b87d1716f0592.png);
   position: absolute;
   background-size: cover;
   background-position: center;
}

你可以将这两个类应用到同一个div元素上：

<div class="view index"></div>

这样，这个div元素将同时具有.view和.index类的样式。

动态样式控制

在JavaScript中，可以通过添加或移除类名来动态改变元素的样式，这对于响应用户操作或状态变化非常有用。

.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);
}

musicBtn.classList.toggle('off');

toggle 方法会检查指定的类名是否已经存在于元素的类名列表中。如果存在，则移除该类名。
如果不存在，则添加该类名。

增强可读性和可维护性

多个类名可以使代码更具可读性和可维护性。每个类名都有明确的含义，便于理解代码的意图。

2.3 Swiper幻灯片容器

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

<div class="swiper-container"> 是Swiper的主容器。
<div class="swiper-wrapper"> 是Swiper的滑动内容容器。
<div class="swiper-slide"> 是每个幻灯片页面，这里只定义了一个幻灯片。
第一个幻灯片页面包含了一个视图（<div class="view index">），其中有一个Logo（<div class="logo-c"></div>）。

2.4 `addEventListener`

musicBtn.addEventListener('click', function(){ ... }) 为音乐按钮添加点击事件监听器，当用户点击音乐按钮时：

if(audio.paused){
     audio.play();
}else{
     audio.pause();
}
musicBtn.classList.toggle('off');

如果音频处于暂停状态，则开始播放音频。
如果音频正在播放，则暂停音频。
切换音乐按钮的off类名，这会改变按钮的外观。

2.5 为什么使用 `translate3d` 而不是 `translateX`

虽然 translateX 也可以实现水平居中，但 translate3d 有几个优势：

GPU加速：如前所述，translate3d 更容易触发GPU加速，提高性能。
兼容性：translate3d 在大多数现代浏览器中都有很好的支持。
一致性：使用 translate3d 可以确保在不同浏览器和设备上的一致性。

2.6 为什么使用高 `z-index` 值

z-index 是一个非常重要的CSS属性，用于控制元素在Z轴（垂直于屏幕的方向）上的堆叠顺序。position: fixed;这是 z-index 生效的前提条件之一。

确保可见性：高 z-index 值确保音乐按钮在任何其他元素之上显示，不会被其他元素遮挡。
防止遮挡：在复杂的布局中，可能会有多个元素重叠。高 z-index 值可以确保关键元素（如音乐按钮）始终可见。
用户交互：确保用户可以轻松点击音乐按钮，不受其他元素干扰。

3. 总结

这样一个美观且交互性强的全屏滑动H5页面就完成啦，不得不说在看似简单的代码中细节暗藏玄鸡。