从零开始的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)); //将被拖元素放置在新容器中
}



dataTransfer对象

  在所有的拖放事件中都提供了一个数据传输对象dataTransfer,主要是用于在源对象和目标之间传递数据。

方法 描述
setData(format,data) 设置拖放事件中要传递的数据,format为数据类型
该方法向dataTransfer中存入数据,其中数据类型有四种 :
text/plain,text/html,text/xml,text/uri-list
第二个参数为存入的数据。
getData(format) 获得拖放事件中传递的数据,format为数据类型
方法从dataTransfer对象中读取数据,参数为setData方法中指定的数据类型
clearData() 此方法清空dataTransfer中存储的数据,参数可选,且为数据类型。没有参数会清空所有数据
setDragImage(element,x,y) 该方法通过img元素来设置拖放图标
element表示拖放时鼠标下面的图片
x是横向偏移量,y是纵向偏移量

  files属性:返回一个FileList对象。

完整代码

<!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>




posted @ 2020-03-14 22:43  枕风  阅读(140)  评论(0编辑  收藏  举报