程序员如何用“心“表白(结尾附源码)

简介: 程序员如何用“心“表白(结尾附源码)

一、写在前面

转眼又到了情人节,不管你此刻心里是否住着一个人,早做一些准备总是没错的。对于技术人,如何发挥自己的特长,为心仪的人准备一份特殊的礼物呢?

本文将介绍一个具备鼠标滑动翻页、页面音乐播放功能的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/,喜欢的小伙伴儿一定要三连加关注哦~

程序员如何用“心“表白

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

目录
相关文章
|
7月前
|
算法 程序员 C#
程序员也可以很浪漫!这样的一款表白代码收藏馆项目,即使小白也可以使用,发给你的对象试试!
程序员也可以很浪漫!这样的一款表白代码收藏馆项目,即使小白也可以使用,发给你的对象试试!
113 0
|
Python
送给她最最浪漫的表白(Python代码实现)
送给她最最浪漫的表白(Python代码实现)
150 0
|
2月前
|
存储 API C语言
【C语言】实践:贪吃蛇小游戏(附源码)(一)
【C语言】实践:贪吃蛇小游戏(附源码)
|
2月前
|
C语言 定位技术 API
【C语言】实践:贪吃蛇小游戏(附源码)(二)
【C语言】实践:贪吃蛇小游戏(附源码)
【C语言】实践:贪吃蛇小游戏(附源码)(二)
|
2月前
|
C语言
【C语言】实践:贪吃蛇小游戏(附源码)(三)
【C语言】实践:贪吃蛇小游戏(附源码)
|
编译器 C++
《C++避坑神器·十八》运算符重载,小白也能看懂
《C++避坑神器·十八》运算符重载,小白也能看懂
53 0
|
Python
Python3,10行代码,我把情书写在她的照片里,她被我的才华征服了。
Python3,10行代码,我把情书写在她的照片里,她被我的才华征服了。
72 1
|
前端开发 自动驾驶 算法
这个知识点99%的前端都没有听过,不信你进来看?
这个知识点99%的前端都没有听过,不信你进来看?
105 0
|
Python
Python3,10行代码,我把情书写在她的照片里,她被我的才华征服了
Python3,10行代码,我把情书写在她的照片里,她被我的才华征服了
33385 1
Python3,10行代码,我把情书写在她的照片里,她被我的才华征服了
|
前端开发
#yyds干货盘点# 前端歌谣的刷题之路-第八十六题-模板字符串
#yyds干货盘点# 前端歌谣的刷题之路-第八十六题-模板字符串
108 0
#yyds干货盘点# 前端歌谣的刷题之路-第八十六题-模板字符串