## 知识点
1、触摸事件
2、旋转的音乐图标
3、背景音乐效果的控制
4、移动端css兼容性的解决思路
5、移动端音乐自动播放的处理方法
6、相关视频下载
[TOC]
## 一、触摸事件
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略
咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。
今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。
后盾CSS3视频教程
https://www.bilibili.com/video/av30185117/?p=68
后盾CSS3视频教程
http://www.houdunwang.com/houdunren18_lesson_254?vid=11990
懒人原生css3可控旋转音乐播放按钮
http://www.lanrenzhijia.com/js/css3/3064.html
## 二、旋转的音乐图标
### 1、结构
~~~
<img src="../static/index/default/images/music.svg" id="mpic">
<audio loop="" src="https://res1.eqh5.com/2a2bdb15b9e545f28396cb68fe75054a.mp3" autoplay="" preload="" id="music"></audio>
~~~
### 2、引入文件
样式文件
jQuery文件
### 3、功能实现
~~~
$('#mpic').on('touchstart',function(){
console.log('touchstart');
});
$('#mpic').on('touchend',function(){
console.log('touchend');
})
~~~
## 三、背景音乐效果的控制
### 暂停或切换
当m=1时，背景旋转，音乐播放
当m=2时，背景停止，音乐停止
~~~
<script>
var m=1;
$('#mpic').on('touchstart',function(){
if (m==1) {
$('#mpic').css({
'animation-play-state':'paused',
});
m=2;
}else{
$('#mpic').css({
'animation-play-state':'running',
});
m=1;
}
});
</script>
~~~
### 暂停播放音乐
~~~
原生写法pause()
document.getElementById('music').pause();
jQuery对象转换原生写法
$('#music')[0].pause();
~~~
### 播放音乐
~~~
$('#music')[0].play();
~~~
### 完整代码
~~~
<script>
var m=1;
$('#mpic').on('touchstart',function(){
if (m==1) {
$('#mpic').css({
'animation-play-state':'paused',
});
$('#music')[0].pause();
m=2;
}else{
$('#mpic').css({
'animation-play-state':'running',
});
$('#music')[0].play();
m=1;
}
});
</script>
~~~
## 四、移动端css兼容性的解决思路
~~~
#mpic{
width: 45px;
height: 45px;
position: fixed;
left: 62px;
top: 88px;
z-index: 200;
-webkit-animation: r 5s linear infinite;
-moz-animation: r 5s linear infinite;
-o-animation: r 5s linear infinite;
animation: r 5s linear infinite;
}
@-webkit-keyframes r {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes r {
from{
-moz-transform: rotate(0deg);
}
to{
-moz-transform: rotate(360deg);
}
}
@-o-keyframes r {
from{
-o-transform: rotate(0deg);
}
to{
-o-transform: rotate(360deg);
}
}
@keyframes r {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
~~~
## 五、移动端音乐自动播放的处理方法
所有移动端都是禁止自动播放的，即禁止autoplay属性
### 1、去掉HTMLautoplay属性
~~~
<audio loop="" src="https://res1.eqh5.com/2a2bdb15b9e545f28396cb68fe75054a.mp3" id="music"></audio>
~~~
### 2、CSS添加停止属性
~~~
#mpic{
width: 45px;
height: 45px;
position: fixed;
left: 62px;
top: 88px;
z-index: 200;
-webkit-animation: r 5s linear infinite;
-moz-animation: r 5s linear infinite;
-o-animation: r 5s linear infinite;
animation: r 5s linear infinite;
animation-play-state:paused;
}
@-webkit-keyframes r {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes r {
from{
-moz-transform: rotate(0deg);
}
to{
-moz-transform: rotate(360deg);
}
}
@-o-keyframes r {
from{
-o-transform: rotate(0deg);
}
to{
-o-transform: rotate(360deg);
}
}
@keyframes r {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
~~~
### 3、功能实现
~~~
<script>
var m=2;
document.ontouched = function(){
$('#mpic').css({
'animation-play-state':'running',
});
$('#music')[0].play();
m=1;
document.ontouched = null;
}
$('#mpic').on('touchstart',function(){
if (m==1) {
$('#mpic').css({
'animation-play-state':'paused',
});
$('#music')[0].pause();
m=2;
}else{
$('#mpic').css({
'animation-play-state':'running',
});
$('#music')[0].play();
m=1;
}
});
</script>
~~~
### 4、升级事件
可以改写成one事件：键盘事件和单击事件，限制只执行一次
~~~
document.one('touchend',function(){
$('#mpic').css({
'animation-play-state':'running',
});
$('#music')[0].play();
m=1;
};
)
~~~
## 六、相关视频下载
1、腾讯微云
~~~
已上传至微云
~~~
2、百度网盘
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作