<!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. oracle数据库启动

    遇到个白痴问题,放假停电,回来时启动数据库,发现无法进入oracle管理员界面. 如下输入,但是显示的命令无效. [oracle@crm001 database]$ sqlplus / as sysd ...

  2. VMware 关闭虚拟机 Ubuntu 12 的 3D 效果，提高性能

    Ubuntu 2012,有 2D 和 3D 的渲染效果,但是 在虚拟机中,开启 3D 效果后,特别卡.好在 VMware 中有个“关闭3D”的开关,如下图所示: 去掉勾选“加速 3D 图形”

  3. Javascript高级程序设计——客户端检测

    ECMAScript虽然是Javascript的核心,但是要在web中使用Javascript,那么BOM才是核心,BOM为我们提供了操作访问浏览器对象的借口, 但是由于BOM没有标准规范,导致存在不 ...

  4. 深入理解Java虚拟机之读书笔记三 内存分配策略

    一般的内存分配是指堆上的分配,但也可能经过JIT编译后被拆散为标量类型并间接地在栈上分配.对象主要分配在新生代的Eden区上,如果启动了本地线程分配缓冲,将按线程优先在TLAB上分配,少数情况下直接分 ...

  5. [POJ1068]Parencodings

    [POJ1068]Parencodings 试题描述 Let S = s1 s2...s2n be a well-formed string of parentheses. S can be enco ...

  6. javascript中数组concat（）join（）split（）

    concat() 方法用于连接两个或多个数组. 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 所以 <script type="text/javascript" ...

  7. 快速排序（Quicksort）

    快速排序:是对冒泡排序的一种改进. 什么是冒泡排序:简单一点就是冒气泡.极值数据会到达数据的顶端. 实现步骤:建立一个数据排列标准,从大到小还是从小到大. [从大到小排列]:从第一个数据开始遍历,比较 ...

  8. windows下php，redis配置

    在windows环境下搭建redis是一般是为了测试,官方redis并没有给windows版redis但是微软有. windows版下载地址:https://github.com/MSOpenTech ...

  9. HDU 1083 网络流之二分图匹配

    http://acm.hdu.edu.cn/showproblem.php?pid=1083 二分图匹配用得很多 这道题只需要简化的二分匹配 #include<iostream> #inc ...

  10. INI文件的读取(C语言:GetPrivateProfileString/GetPrivateProfileInt)

    INI文件格式说明 /********************************************* ini文件说明 ini文件是文本文件,由节点(Section)和键值对(key=val ...