<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width; initial-scale=1.0">

<title>演示：使用按钮控制HTML5背景音乐开关</title>

</head>

<body>

    <div id="main">

        <div style="width:36px; height:36px;float:right;position:absolute;z-index:13;top:5px;right:5px;">

        <audio id="music" src="../addons/shd_xb/template/style/mp3/back.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>

        <a id="audio_btn"><img src="../addons/shd_xb/template/style/image/play.png"   id="music_btn" border="" ></a>

   </div>

    </div>

    <script type="text/javascript"

        src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>

    <script>

        $("#audio_btn").click(function() {

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

            if (music.paused) {

                music.play();

                $("#music_btn").attr("src", "play.gif");

            } else {

                music.pause();

                $("#music_btn").attr("src", "pause.gif");

            }

        });

        function playPause() {

            var music = document.getElementById('music2');

            var music_btn = document.getElementById('music_btn2');

            if (music.paused) {

                music.play();

                music_btn.src = 'play.gif';

            } else {

                music.pause();

                music_btn.src = 'pause.gif';

            }

        }

    </script>

</body>

</html>

使用按钮控制HTML5背景音乐开关的更多相关文章

  1. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  2. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. HTML5背景知识

    目录 HTML5背景知识 HTML的历史 JavaScript出场 浏览器战争的结束 插件称雄 语义HTML浮出水面 发展态势:HTML标准滞后于其使用 HTML5简介 新标准 引入原生多媒体支持 引 ...

  4. jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动

    jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 http://www.17sucai.com/pins/demoshow/382

  5. Micropython Turnipbit 换挡风扇 旋转按钮控制直流电机转速

    学过物理学的我们都知道换挡风扇的原理,一般按钮控制电感分压或者电容分压,以达到控制电流的目的.那么我们可不可以使用Turnipbit模拟这个系统呢?其实是很简单的.类似于之前用Tpyboard做的智能 ...

  6. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  7. 人体感应模块控制LCD1602背景灯是否开启

    /* Web client This sketch connects to a website (http://www.google.com) using an Arduino Wiznet Ethe ...

  8. csu 1770按钮控制彩灯实验(树状数组)

    1770: 按钮控制彩灯实验 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 194  Solved: 65[Submit][Status][Web Bo ...

  9. SAM4E单片机之旅——6、LED闪烁之按钮控制

    现在试试用按钮控制LED灯……让LED在一个按钮按下时亮起:弹起时灭掉. 主要目的是学习GPIO的输入及中断. 一. 电路 图中的J39-n是几个跳线插座,位置在开发板LCD附近,往下进行前要先确保跳 ...

随机推荐

  1. C语言：break和continue

    break: break用于循环则是终止循环,break如果用于switch,则是用于终止switch.break不能直接用于if,除非if是属于循环内部的一个子句 ;i<;i++) { > ...

  2. sharepoint learning resourse

    开始学习sharepoint后,我决定将我的个人电脑上也部署一套开发系统,这样回家也可以学习些东西.因此写点关于部署sharepoint需要资源的文字供初学sharepoint的童鞋一起进步,以避免各 ...

  3. hdu.1111.Secret Code(dfs + 秦九韶算法）

    Secret Code Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  4. python下载网页源码 写入文本

    import urllib.request,io,os,sysreq=urllib.request.Request("http://echophp.sinaapp.com/uncategor ...

  5. java之BASE64加解密

    1.简介 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所直接看到. 注:位于jdk的java.util包中. 2. ...

  6. Javascript高级程序设计——面向对象之理解对象

    在面向对象语言中都有类的概念,通过类来创建具有属性和方法的对象.而ECMAScript中没有类的概念,ECMAScript中定义了对象:无需属性的集合,其属性值可以包含基本值.对象.或者函数. 在Ja ...

  7. BZOJ1503——郁闷的出纳员

    1.题目大意:一道treap题,支持插入,询问第K大,还有全体修改+上一个值,如果某个点值小于x,那么就删除这个点 插入100000次,询问100000次,修改100次..最后输出删了多少个点 2.分 ...

  8. [hihoCoder#1065]全图传送

    [hihoCoder#1065]全图传送 试题描述 先知法里奥是 Dota 系列中的一个英雄.机动性强,推塔能力一流,打钱速度快,传送技能使先知可以全地图支援.在后期比拼中通过强大的兵线控制能力使得对 ...

  9. Oracle 多表查询优化

    ORACLE有个高速缓冲的概念,这个高速缓冲就是存放执行过的SQL语句,那oracle在执行sql语句的时候要做很多工作,例如解析sql语句,估算索引利用率,绑定变量,读取数据块等等这些操作.假设高速 ...

  10. qt-5.6.0 移植之tslib 配置及编译

    tslib 是qt启动时的一个触屏校正检验程序. 它的配置以及编译比较简单. 第一步, 下载tslib源码包: http://download.csdn.net/detail/MKNDG/329156 ...