html5初学3

最新推荐文章于 2022-08-27 17:12:06 发布

shenzumuwan

最新推荐文章于 2022-08-27 17:12:06 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/shenzumuwan/article/details/78425438

版权

继续我的html5的学习。前两节主要讲了html5的一些基本属性元素以及一些约定俗成的规则。这次开始接入代码(示例基本来自于w3cSchool)。
代码仍然是从简到难。
1.视频
   当前html5支持3种格式的视频：Ogg，MPEG4，WebM
   <video width="320" height="240" controls="controls">
       <source src="movie.ogg" type="video/ogg">
       <source src="movie.mp4" type="video/mp4">
   Your browser does not support the video tag.
   </video>
   注解：control 属性供添加播放、暂停和音量控件，<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的，source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
2.音频属性基本与视频类似
3.拖放，抓取对象后拖到另一个位置
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>

</body>
</html>

注解：把元素的draggable属性设置为true，表示可拖动。ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据，dataTransfer.setData() 方法设置被拖数据的数据类型和值。在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")；ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法；
当放置被拖数据时，会发生 drop 事件。在上面的例子中，ondrop 属性调用了一个函数，drop(event)，把被拖元素追加到放置元素（目标元素）中

shenzumuwan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5初学3

继续我的html5的学习。前两节主要讲了html5的一些基本属性元素以及一些约定俗成的规则。这次开始接入代码(示例基本来自于w3cSchool)。代码仍然是从简到难。1.视频当前html5支持3种格式的视频：Ogg，MPEG4，WebM Your browser does not support the video ta
复制链接

扫一扫