HTML5新特性

最新推荐文章于 2022-02-27 08:45:07 发布

格林黄

最新推荐文章于 2022-02-27 08:45:07 发布

阅读量332

点赞数 1

分类专栏： web前段javascript知识点汇总

本文链接：https://blog.csdn.net/apity123/article/details/69662800

版权

web前段javascript知识点汇总专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.音频video&&视频audio

Your browser does not support video tag.

</video>

2.audio元素支持三种音频格式：

Ogg Vorbis Firefox 3.5 Opera10.5 Chrome3.0

Mp3 IE 9 Chrome3.0

Wav Firefox 3.5 Opera 10.5 Chrome 3.0

3.video元素支持三种视频格式

Ogg Firefox(3.5+) Opera(10.5+) Chrome(5.0+)

MPEG 4 IE(9,0+) Chrome(5.0+)

WebM Firefox(4.0+) Chrome(6.0+)

Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件

MPEG4=带有H.264视频编码和AAC音频编码的MPEG 4文件

WebM=带有VP8视频编码和Vorbis音频编码的WebM文件

HTML5拖放

1.HTML5中的drag&&drop

-以前实现拖放：

通过Mousedown、Mouseover、Mouseup等事件，监听鼠标动作不停地获取鼠标的坐标来修改元素的a位置

-HTML5的实现

通过Drag&Drop事件实现。

2.drag&drop的详细事件

dragstart 开始拖对象时触发（被拖动对象）

dragenter 当对象第一次被拖动到目标对象上时触发。同时表示该目标对象允许‘放’这动作（目标对象）

dragover 当对象拖放到目标对象时触发（当前目标对象）

dragleave 在拖动过程中，当被拖动对象离开目标对象触发（先前目标对象）

drag 每次当对象被拖动时就会触发(被拖动对象)

drop 当发生“放”这动作时触发(当前目标对象)

dragend 在拖动过程，松开鼠标时触发(被拖动对象)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#box
{
	width:300px;
	height:300px;
	background-color:#999;
	float:left;
}
#img
{
	width:100px;
	height:100px;
	float:left;
}
</style>
<script>
	var boxDiv,msgDiv;
	window.οnlοad=function()
	{
		boxDiv=document.getElementById("box");
		msgDiv=document.getElementById("msg");
		img=document.getElementById("img");
		
		img.οndragstart=function(e)
		{	
			e.dataTransfer.setData("imgid","img");
		}
		
		boxDiv.ondragover = function(e){
		e.preventDefault();
		
		}
		boxDiv.οndrοp=function(e)
		{
			e.preventDefault();
			showObj(e.dataTransfer);
			
			var my_img=document.getElementById(e.dataTransfer.getData("imgid"));
			boxDiv.appendChild(my_img);
		}
	}
	function showObj(obj){
		var s="";
		for(var k in obj){
			s+=k+"        "+obj[k]+"<br/>";	
		}
		msgDiv.innerHTML=s;
	}
</script>
<body>
	<div id="box" class="box"></div>
    <img id="img" src="0.jpg" />
    <div id="msg"></div>
</body>
</html>

从桌面上或其他的地方拖放到网页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#imgContainer
{
	width:400px;
	height:400px;
	background-color:#0C3;
}
</style>
<script>
	var imgContainer,msgDiv;
	window.οnlοad=function()
	{
		imgContainer=document.getElementById("imgContainer");
		msgDiv=document.getElementById("msg");
		imgContainer.οndragοver=function(e)
		{
			e.preventDefault();
		}
		imgContainer.οndrοp=function(e)
		{
			e.preventDefault();
			//showObj(e.dataTransfer.files[0]);
			var file=e.dataTransfer.files[0];
			var fileReader =new FileReader();
			fileReader.readAsDataURL(file);
			fileReader.οnlοad=function(e)
			{
				//showObj(fileReader);
				imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"
			}
		}
	}
	function showObj(obj)
	{
		var s="";
		for(var k in obj)
		{
			s+=k+":"+obj[k]+"<br/>"
		}
		msgDiv.innerHTML=s; 
	}
</script>
</head>

<body>
<div id="imgContainer">
</div>
<div id="msg">
</div>
</body>
</html>