程序员如何用“心“表白（结尾附源码）

Posted 2022-03-04 一头小山猪

写在前面：博主是一只经过实战开发历练后投身培训事业的“小山猪”，昵称取自动画片《狮子王》中的“彭彭”，总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域，如今终有小成，愿将昔日所获与大家交流一二，希望对学习路上的你有所助益。同时，博主也想通过此次尝试打造一个完善的技术图书馆，任何与文章技术点有关的异常、错误、注意事项均会在末尾列出，欢迎大家通过各种方式提供素材。

• 对于文章中出现的任何错误请大家批评指出，一定及时修改。
• 有任何想要讨论和学习的问题可联系我：[e-mail]。
• 发布文章的风格因专栏而异，均自成体系，不足之处请大家指正。

程序员如何用"心"表白（结尾附源码）

本文关键字：情人节、表白、页面滑动、播放器

文章目录

• 程序员如何用"心"表白（结尾附源码）
• • 一、写在前面
  • 二、展示效果
  • 三、核心文件
  • • 1. css/H5_index.css
    • 2. js/H5_index.js
    • 3. js/index.js
    • 4. index.html
  • 四、案例源码
  • 五、视频直达

一、写在前面

转眼又到了情人节，不管你此刻心里是否住着一个人，早做一些准备总是没错的。对于技术人，如何发挥自己的特长，为心仪的人准备一份特殊的礼物呢？
本文将介绍一个具备鼠标滑动翻页、页面音乐播放功能的H5项目，重要的是可以最大限度的自定义内容。笔者认为，再酷炫的效果也只是工具，一定要用各种素材来将它填充完整，这样对方才能感受到你的用心~

二、展示效果

本案例更加适合在移动端竖屏打开，本身也支持自适应，在选择素材时需要注意一下图片比例。

• 滑动翻页效果

• 自定义文字

• 自定义图片

• 自定义特效

• 音乐播放器

• 完整效果

三、核心文件

1. css/H5_index.css

添加页面和组件的具体用法查看H5_index.js

在添加页面或组件时，可以在其中定义通用的样式（将选择器名称与参数一致即可生效）：

• 添加页面：

页面参数：face -> 完整选择器名称：.h5_page_face

• 添加组件：

组件参数：slogan -> 完整选择器名称：.h5_component_name_slogan

2. js/H5_index.js

向页面追加内容时需要修改的文件，主要通过addPage()和addComponent()两个方法。

• 无参addPage()

添加一个新的div平铺整个显示区域，默认引入.h5_page样式（H5_index.css中），可在其中指定默认的背景图片。

• 无name参数的addComponent()

添加一个div的子元素，在当前区域中显示，可以为文字、图片、带背景的图片等。具体支持的参数如下：

    width: 纯数字, -> 居中时填写真实宽度的2倍或更多，否则文字可能折行，可以通过此属性控制图片大小
    height: 纯数字, -> 居中时填写真实高度的2倍或更多，添加文字时可省略
	center: true, -> 是否居中显示
	text: '自定义文字', -> 自定义文字的内容
	css: 
        // 自定义的css样式，可以直接使用css的属性，使用逗号隔开
        // 此处设置的样式优先级最高，可作为元素的初始效果
        "opacity": 0, -> 初始为透明（不显示）
        "top": "240px" -> 距离页面顶端240px
	,
	animateIn:  -> 元素出现时的动画效果
		opacity: 1, -> 完全不透明（显示）
		top: 250 -> 最终位置为250px（此处不需要写单位），这样就可以出现一个10px的滑动出现效果
	,
	animateOut:  -> 元素消失时的动画效果
		opacity: 0,
		top: 300
	,
	delay: 1000 -> 动画开始执行的延时时间，可以使用这个属性控制各组件的顺序，单位为毫秒

• 有name参数的addPage()

使用name参数可以和预设的css选择器进行绑定，匹配规则见H5_index.css，可以预先指定背景图片等。

• 有name参数的addComponent()

使用name参数可以和预设的css选择器进行绑定，匹配规则见H5_index.css。需要注意的是，传入的json对象中的css属性优先级更高，可以在css文件中添加各种css3动画效果。

3. js/index.js

向播放器中配置曲目时需要修改的文件，主要修改albums、trackNames、albumArtworks、trackUrl四个数组。

• albums：歌曲名
• trackNames：作者名
• albumArtworks：与index.html中的元素id匹配
• trackUrl：资源路径

4. index.html

直接运行的文件，可以在其中引入其他的自定义文件，需要在id为album-art的div中修改曲目（配图、元素id与albumArtworks一致）。

<div id="album-art">
    <img src="mp3/1.jpg" class="active" id="_1">
    <img src="mp3/2.jpg" id="_2">
    <div id="buffer-box">加载中...</div>
</div>

四、案例源码

• 表白神器

五、视频直达

视频地址：https://www.bilibili.com/video/BV1D541177cg/，喜欢的小伙伴儿一定要三连加关注哦~

程序员如何用“心“表白

写在结尾：作者力求做到将每个知识点细化，并且对于有关联的知识点都会使用传送门挂载链接。文章采用：“文字 + 配图 + 视频”的方式来进行展现，均是挤时间所作，希望看到这里能留下评论点个赞，略表支持！

扫描下方二维码，加入官方粉丝微信群，可以与我直接交流，还有更多福利哦~