从零开始的HTML5之旅(三)
HTML5音频
??HTML5规定了一种通过audio元素包含音频的方法。audio能够播放声音文件和音频流。
音频格式
格式 | IE9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari3.0 |
---|---|---|---|---|---|
Ogg Vorbis | — | 支持 | 支持 | 支持 | — |
Mp3 | 支持 | — | — | 支持 | 支持 |
Wav | — | 支持 | 支持 | — | 支持 |
??从上面的格式中我们可以知道,在实际应用中仅仅只需要用到Ogg格式和Mp3格式。
??audio的属性、方法、事件和video基本一致,可以参考从零开始的HTML5之旅(二)。
音频Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="audio_div"> <audio id="audio1" controls > <source src="https://www.w3school.com.cn/i/song.ogg" type="audio/ogg"> <source src="https://www.w3school.com.cn/i/song.mP3" type="audio/mpeg"> </audio> </div> <div id="btn"> <button onclick="Play()">开始</button> <button onclick="Pause()">暂停</button> </div> </body> </html> <script> var id = document.getElementById("audio1"); function Play() { id.play(); } function Pause(){ id.pause(); } </script>
HTML5拖放
??拖放是HTML5的标准的组成部分。它是种常见的特性,就是将一个东西抓取然后拖到另一个位置放下。在HTML5种,任何元素都能进行拖放。
浏览器支持
??IE9+、Firefox、Opera、Chrome、Safari都支持拖放。
拖动时的事件
事件 | 描述 |
---|---|
ondragstart | 用户开始拖动元素时触发 |
ondrag | 元素正在拖动时触发 |
ondragend | 用户完成元素拖动后触发 |
释放目标时的事件
事件 | 描述 |
---|---|
ondragenter | 当被鼠标拖动的对象进入其容器范围内时触发此事件 |
ondragover | 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 |
ondragleave | 当被鼠标拖动的对象离开其容器范围内时触发此事件 |
ondrop | 在一个拖动过程中,释放鼠标键时触发此事件 |
设置可拖动
<a draggable="true"></a> <img draggable="true"> …… <p draggable="true"></p>
用ondragstart和setData()给目标设值
<img id="drag1" height="80px" width="80px" src="" draggable="true" ondragstart="drag(event)" /> //以下是js中的代码 function drag(e){ e.dataTransfer.setData("Text",e.target.id) }
??这个代码中,数据类型是"Text",元素id则为"drag1"。
规定在何处放置目标
??ondragover事件规定在哪里放置被拖动的数据。HTML中默认是不能将元素放在其他元素中的,因此,需要我们主动设置允许放置。这就需要用到ondragover事件中的e.preventDefault()方法。
<div style="height: 90px;width: 90px; border:1px solid brown" ondragover="allowDrop(event)"></div> function allowDrop(e){ e.preventDefault(); }
放置
??ondrop:在一个拖动过程中,释放鼠标键时触发此事件
??这里直接放上代码:
<div style="height: 90px;width: 90px; border:1px solid brown" ondrop="drop(event)" ondragover="allowDrop(event)"></div> function drop(e){ e.preventDefault(); //避免浏览器对数据的默认处理 var data=e.dataTransfer.getData("Text"); //声明变量data,将获取的数据存到data中。此方法返回setData()中设置为相同数据的任何数据,其中被获取的数据是ID为drag1的元素。 e.target.appendChild(document.getElementById(data)); //将被拖元素放置在新容器中 }
完整代码
<!DOCTYPE HTML> <html> <head> <title>拖放Demo</title> </head> <body> <div style="height: 90px;width: 90px; border:1px solid brown" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img id="drag1" height="80px" width="80px" src="https://images.cnblogs.com/cnblogs_com/ODevil/1668365/o_20031214461554175539_p0_master1200.jpg" draggable="true" ondragstart="drag(event)" /> </body> </html> <script type="text/javascript"> function allowDrop(e) { e.preventDefault(); } function drag(e) { e.dataTransfer.setData("Text",e.target.id); } function drop(e) { e.preventDefault(); var data=e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); } </script>
相关推荐
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
swiftwwj 2020-07-21
行吟阁 2020-05-30
WebVincent 2020-03-04
黎豆子 2020-02-18
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q
玫瑰小妖 2020-01-24
wusiye 2020-10-23
nercon 2020-08-01
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19