README.md

情人节表白神器

项目说明

本项目为纯HTML项目,不需要npm构建,不需要额外环境,直接使用浏览器打开index.html文件即可。

项目整合了鼠标滚轮翻页以及部分动画组件,可以自定义的文件会在下方说明。

项目中内置了一个简单易用的音乐播放器,来自dowebok.com。可花费50积分获取(新用户注册送100积分),如有侵权,请联系作者。

注:在开发时请不要使用HBuilder内置浏览器调试,部分功能会失效,复制地址到浏览器运行正常。

目录说明

  • css : 样式文件存放目录,基本都不需要修改
  • fonts : 字体文件存放目录
  • imgs : 背景图、素材图片存放目录
  • js : js代码存放目录,主要控制页面内容以及播放器曲目
  • mp3 : 音乐文件

资源文件

以下文件如无个人需要,无需修改

1. css样式文件

  • css/fontawesome.css : 字体样式文件
  • css/H5_loading.css : "加载中"动画效果
  • css/H5.css : 页面全局样式
  • css/H5ComponentBase.css : 组件全局样式
  • css/solid.css : 字体样式文件
  • css/style.css : 音乐播放器样式文件

2. js库文件

  • js/lib/jquery-ui.min.js : jQuery-ui库文件
  • js/lib/jquery.fullPage.js : jQuery-fullPage库文件
  • js/lib/jquery.js : jQuery库文件
  • js/H5_loading.js : 页面动画效果加载及初始化
  • js/H5.js : 添加页面、组件的定义文件
  • js/H5ComponentBase : 页面基础组件(文字、图片等)定义文件

核心文件

以下为可以自定义的核心文件,具体用法可参考博客文章,在此只做简要说明

1. css/H5_index.css

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

  • 添加页面:

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

  • 添加组件:

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

2. js/H5_index.js

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

3. js/index.js

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

4. index.html

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

博客&文章

项目简介

表白神器

发行版本

当前项目没有发行版本

贡献者 1

一头小山猪 @u012039040

开发语言

  • JavaScript 86.9 %
  • CSS 9.2 %
  • HTML 3.9 %