<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

</head>

<body>

<a class="mscBtn" id="audioBtn" style="cursor:pointer;"></a>

<audio id="bgMusic" src="http://tenc.rabbitpre.com/mp3/c5de3e51-7096-4ae5-9af1-50f3eca80f1d" autoplay="autoplay" loop="loop"></audio>

<script>

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

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

        if(music.paused){//检查视频是否已暂停 true 指示音频/视频已暂停。否则为 false。

            music.play();//开始播放

            $("#audioBtn").removeClass("pause").addClass("play");

        }else{

            music.pause();//暂停播放

            $("#audioBtn").removeClass("play").addClass("pause");

        }

    });

</script>

<style>

    .pause {background-position: 0 bottom;}

    .mscBtn {height: 50px;

        background: #fff url(images/musicBtn.gif) no-repeat;

        display: block;

    }

</style>

</body>

</html>

jquery 如何控制音乐打开和关闭的更多相关文章

  1. jQuery、layer实现弹出层的打开、关闭功能实例详解

    本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...

  2. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  3. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  4. Linux C 文件与目录2 文件的打开与关闭

    文件的打开与关闭 open和close 文件的打开指的是从磁盘中找到一个文件,返回一个整形的打开文件顺序的编号.打开的文件处于可读.可写状态.文件的关闭指的是释放打开的文件,是文件处于不可读写的状态. ...

  5. Linux C编程--打开和关闭流

    以下函数用于打开和关闭一个流.#include <stdio.h>FILE * fopen (const char *pathname, const char *opentype);int ...

  6. 【转】Android：Bluetooth 的打开和关闭--不错

    原文网址:http://www.ifeegoo.com/android-turn-on-and-turn-off-bluetooth.html 摘要:Android 中打开和关闭 Bluetooth ...

  7. 不使用JavaScript实现菜单的打开和关闭

    我在写有菜单栏的网页时,基本都会用响应式设计来适配移动端,例如把不重要的菜单选项隐藏,或者创建一个菜单按钮来控制的菜单的打开和关闭之类的.而我之前一直是使用JavaScript来实现菜单的打开和关闭的 ...

  8. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  9. sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件） ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字， C# WinForm 中英文实现， 国际化实现的简单方法 ASP.NET Core 2 学习笔记（六）ASP.NET Core 2 学习笔记（三）

    sql server 关于表中只增标识问题   由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...

随机推荐

  1. Spring+SpringMVC+MyBatis集成（SSM）

    1.导入需要用到的jar包 <dependencies> <!--Spring核心包--> <dependency> <groupId>org.spri ...

  2. Java开发笔记（一百一十七）AWT窗口

    前面介绍的所有Java代码,都只能通过日志观察运行情况,就算编译成class文件,也必须在命令行下面运行,这样的程序无疑只能给开发者做调试用,不能拿给一般人使用.因为普通用户早已习惯在窗口界面上操作, ...

  3. mysql疑问

  4. BZOJ4141 THUSC2013 魔塔 贪心

    没得传送门 考虑当\(Atk\)增大时,\(Def\)一定越来越没用,因为回合数在变少.所以考虑从小到大枚举\(Atk\)然后双指针计算. 设\(f_i(x)\)表示在\(Atk = i\)时,\(D ...

  5. Zookeeper学习笔记（三）——java客户端代码操作

    Zookeeper客户端java代码操作 上篇博客记录了shell命令操作zookeeper集群的方式,这次尝试采用java代码来操作.通过查阅API,发现并不困难. 1. 首先获得客户端与服务器的连 ...

  6. MySQL-5.7.26解压版安装教程

    1.下载地址:https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.26-winx64.zip 2.在解压目录中添加 data文件夹 和 my.in ...

  7. 全面学习 Python 包：包的构建与分发

    首发于公众号:Python编程时光 1. 为什么需要对项目分发打包? 平常我们习惯了使用 pip 来安装一些第三方模块,这个安装过程之所以简单,是因为模块开发者为我们默默地为我们做了所有繁杂的工作,而 ...

  8. 有状态的bean和无状态的bean的区别

    有状态会话bean :每个用户有自己特有的一个实例,在用户的生存期内,bean保持了用户的信息,即“有状态”:一旦用户灭亡(调用结束或实例结束),bean的生命期也告结束.即每个用户最初都会得到一个初 ...

  9. vue应用难点总结

    一.父子组件生命周期 父组件create->子组件create->子组件mounted->父组件mounted 当一个钩子函数使用了异步请求时,并不会等该钩子函数中所有异步的回调都执 ...

  10. 你再也不用使用 Redux、Mobx、Flux 等状态管理了

    Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能.看完这个库的说明后,没有想到代码可以这个玩.短短几行代码,仅仅使用 ...