前言:
河流之所以能够到达目的地,是因为它懂得怎样避开障碍
--------------------------------正文---------------------------------
运动
transition: duration type-style timing-function delay;
高级动画:(animation)
定义一个动画
@keyframes name{
from{}
to{}
}
调用一个动画
animation: name duration ...;
贝塞尔曲线:(cubic-bezier(x1,y1,x2,y2))
名字
-webkit-animation-name: toBig;
运动时长
-webkit-animation-duration: 1s;
运动类型
-webkit-animation-timing-function: ease;
迭代次数 infinite 无限
-webkit-animation-iteration-count: infinite;
方向 alternate
-webkit-animation-direction: alternate;
播放状态
-webkit-animation-play-state: paused|running;
延迟
-webkit-animation-delay:;
停在那
-webkit-animation-fill-mode: backwards;
HTML5
文件拖拽
ondragover 拖在上面
ondragenter 拖进去
ondragleave 拖出来
ondrop 鼠标释放事件
如果想让ondrop触发,必须阻止ondragover的默认行为
获取文件信息
oEle.ondrop = function(ev){
ev.dataTransfer.files 所有拖拽文件列表
var oFile = ev.dataTransfer.files[0];
};
文件信息
oFile.name 名字
oFile.size 大小
oFile.type 类型
oFile.type
MIME-Type
主类型/子类型
text/plain
image/jpeg
image/gif
video/avi
video/mp4
audio/mp3
audio/ogg
文件内容
借助文件读取对象
var reader = new FileReader()
reader.readAsText(oFile) 通过文本读取
reader.readAsDataURL(oFile) 通过Base64读取
进度更改触发
reader.onprogress = function(ev){
ev.loaded 以加载
ev.total 总数
};
操作视频音频
视频
video标签
视频格式
mp4 各种浏览器都兼容
ogg
avi
webb
属性
controls 控制台
autoplay 自动播放
loop 环路播放
音频
audio标签
音频格式
mp3 各种浏览器都兼容
ogg
矢量图标:https://icomoon.io/
video
方法
play() 播放
pause() 暂停
属性
currentTime 当前播放时间
duration 全部时间
ontimeupdate 进度条事件
onloadeddata 视频加载完成事件