html5 鼠标点击移动 w3c,HTML5——w3c教程总结（一）

一、video标签

实现

video支持媒体播放视频功能，兼容性IE9以上，IE9支持部分MP4功能。

你的浏览器不支持video标签 //当浏览器不支持时显示的文字

效果如图：

video_show.png

属性：

video属性.png

方法：

video方法.png

实现代码如下：

您的电脑不支持video标签

var video = document.getElementById("video");

function play(argument) {

if(video.paused){

video.play();

}else{

video.pause();

}

}

function makeBig(){

video.width = 560;

}

function makeMiddle(){

video.width = 400;

}

function makeSmall(){

video.width = 300;

}

二、audio标签

1.实现

Your browser does not support the audio tag.

2.属性

audio标签.png

三、拖拽

1.实现


function drag(event){

event.dataTransfer.setData("Text",event.target.id);

}

function drop(event){

event.preventDefault();

var data = event.dataTransfer.getData("Text");

event.target.appendChild(document.getElementById(data));

}

function allowDrop(event){

event.preventDefault();

}

首先设置元素为可拖拽


然后执行拖拽方法


function drag(event){

event.dataTransfer.setData("Text",event.target.id);

}//将拖拽目标保存到event.dataTransfer中

将拖拽目标拖拽到容器中

function drop(event){

event.preventDefault();

var data = event.dataTransfer.getData("Text");

event.target.appendChild(document.getElementById(data));

}

是否允许拖拽放在容器中

function allowDrop(event){

event.preventDefault();//不设置为代表不允许放在容器中

}