html5学习笔记(系列2)

6,audio标签

6.1 标签属性

<audio> 标签的属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。

6.2 支持的音频类型

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis

MP3

Wav

6.3 示例:

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>


7,拖放(drag)

7.1 拖放介绍

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

7.2 步骤

(1)首先,为了使元素可拖动,把 draggable 属性设置为 true

(2)然后,规定当元素被拖动时,会发生什么,这主要是通过设置

            ondragstart

        函数完成,在该函数中可以将某些值保存在dataTransfer中,例如拖动的标签id,

        有关dataTransfer的内容请参考如下链接:

        https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

        http://www.cnblogs.com/oneword/archive/2009/05/31/1492600.html

        http://www.hbcms.com/main/dhtml/index.html

(3)当元素拖动到到某标签时,调用ondragover

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法

(4)当将元素放下时,需要进行相关处理,例如将元素插入到某标签中。

主要调用ondrop方法完成。

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>测试网页</title>
    <style type="text/css">
        #div1,#div2 {float:left;width: 488px;height: 70px;padding: 10px; border: 1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">
        function allowdrag(ev)
        {
            ev.preventDefault();
        }
        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function drop(ev)
        {
            ev.preventDefault();
            var datavalue = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(datavalue));
        }
    </script>
</head>
<body>
    <div id="div1" ondragover="allowdrag(event)"  ondrop="drop(event)">
        <img id="img1" src="hello_kitting.gif" draggable="true" ondragstart="drag(event)" />
     </div>
    <div id="div2" ondragover="allowdrag(event)"  ondrop="drop(event)">
</body>
</html>

在编写代码过程中,漏掉了img标签的id属性,导致结果总是不对,后来仔细分析代码,找到了该问题。

你可能感兴趣的:(audio,drop,drag,dataTransfer,ondrapstart,ondragover)