html5第二天笔记（上）

全屏

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;