<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. [转帖]Linux教程(8)-Linux中的进程和日志㐇、

    Linux教程(8)-Linux中的进程和日志 2018-08-20 23:42:23 钱婷婷 阅读数 3554更多 分类专栏: Linux教程与操作 Linux教程与使用   版权声明:本文为博主原 ...

  2. springboot注入的四个注解

    java配置主要靠java类和一些注解来达到和xml配置一样的效果,比较常用的注解有: @Configuration:声明一个类作为配置类,代替xml文件@Bean:声明在方法上,将方法的返回值加入B ...

  3. golang程序因未知错误崩溃时如何记录异常

    开发服务器程序时如果未经过充分测试, 服务稳定运行一段时间后会突然崩溃退出.一般是因为程序中出现了某个未捕获的异常. 这类问题属于偶现的,且需要服务器运行一段时间之后才会出现,难以定位有问题的代码段. ...

  4. 数组中重复的数字(Golang)

    使用哈希表 package main import "fmt" func main() { a := [...]int{2,3,1,0,2,5,3} num := make(map ...

  5. springboot 配置elasticsearch Java High Rest Client

    前提声明 在新版本的spring boot中逐渐放弃了对Spring Data Elasticsearch的支持,所以不推荐使用,使用ES官方推出的Java High Rest Client. 引入依 ...

  6. go 学习笔记（4） package

    package name 尽量与目录名称一样 package name: 表示代码文件所属的包

  7. angularjs 中的路由 与 bootstrap标签选项卡的冲突 解决方案

    当项目中使用了angularjs 的路由,则所有 像a标签的href 的链接都会走路由,实现页面跳转,那么有些地方需要使用选项卡,就会带来麻烦. 路由使用如下图: 某页面需要使用bootstrap的选 ...

  8. 利用脚本一键执行脚本，创建SharePoint文档库列表

    SharePoint基于文档库和列表上进行二次开发,生成新的文档库和新的列表模板 通过新的模板,创建新的文档库与列表 --定义site对象$site = SPSite http://dvt176/si ...

  9. Unity - Profiler参数详解

    CPU Usage ​       ● GC Alloc - 记录了游戏运行时代码产生的堆内存分配.这会导致ManagedHeap增大,加速GC的到来.我们要尽可能避免不必要的堆内存分配,同时注意:1 ...

  10. javascript高级程序设计阅读总结

    5章 引用类型 1.object类型 创建 1.var obj ={} ---对象字面量 2.var obj = new Object(); ---new操作符 2.Array类型 创建 1.var ...