全屏
webkitRequestFullScreen
任意元素全屏
webkitCancelFullScreen
关闭全屏,只能通过document实现关闭
fullScreen
检测是否全屏,有兼容问题
document.webkitIsFullScreen
全屏伪类
.box:-webkit-full-screen,有兼容问题
文件上传
onchange事件
发生改变的时候会触发
file.onchange=function(){};
fileList
type为”file”的input元素,通过.files获得伪数组
FileReader
FileReader是js内建的对象,所以要new出来
//实例化读取器
var fileReader = new FileReader();
//读取文件
fileReader.readAsDaraURL(file);
//fileReader.readAsBinaryString(file);
//fileReader.readAsText(file);
//文件过大,不能马上读完
//监听读取进度,读取完成之后触发onload事件
fileReader.onload(){
this.result;
document.querySelector("img").src=this.result;
}
图片拖拽
拖拽元素
设置行内属性draggable为true,就能实现拖拽
draggable = "true"
//拖拽元素被拖拽触发
elment.addEventLisrener("drag",function(){
});
//拖拽开始时触发
elment.addEventLisrener("dragstart",function(){
});
//鼠标箭头离开时触发,针对拖拽元素,也针对目标元素
elment.addEventLisrener("dragleave",function(){
});
//鼠标松开时触发
elment.addEventLisrener("dragend",function(){
});
目标元素
//光标进入目标元素的时候,_触发一次_
elment.addEventLisrener("dragenter",function(){
});
//光标在目标元素的时候
elment.addEventLisrener("dragover",function(ev){ //阻止默认行为,不然drop不会生效
ev.preventDefault();
});
//光标在目标元素里松开
elment.addEventLisrener("drop",function(){
//阻止默认行为,就不会打开图片的地址
ev.preventDefault();
});
自定义Vedio
获取vedio元素
var video = $("vedio")[0];//jQuery对象转原生dom对象
//检测视频可以播放时触发
vedio.oncanplay = function(){
//...
};
//播放方法
vidio.play();
//暂停方法
video.pause();
//暂停属性 true/false
vedio.paused;