<!--音乐-->
<div id="music">
<img src="../img/music.gif" class="m" />
<img src="../img/music_off.png" class="off" />
<!--<audio src="../mp3/bgmusic.mp3" loop="loop" preload="auto" autoplay="autoplay" class="bgmusic">你的浏览器不支持audio标签。</audio>-->
</div>
<!--end-->

  

#music {
width: 0.8rem;
height: 0.8rem;
position: fixed;
top: 0.2rem;
right: 0.3rem;
z-index: 9999;
background-size: contain;
text-align: center;
} @keyframes music {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} #music img.m{
width: 100%;
height: 100%;
} #music img.off {
position: absolute;
top: 25%;
left: 25%;
transform: translateX(-50%);
animation: music 2s linear infinite;
}

  

<script type="text/javascript">
$(function(){
var play=true;
$("#music").click(function(e){
if(play==true){
$(".m").hide();
$(".off").css({
"transform":"rotate(0deg)",
"animation":"music 0s"
})
$(".bgmusic").get(0).pause();
play=false;
}else{
$(".m").show();
$(".off").css({
"animation":"music 2s linear infinite"
})
$(".bgmusic").get(0).play()
play=true;
}
})
})
</script>

  

h5 中MP3 播放暂停 jq的更多相关文章

  1. Cocos2d-x中背景音乐播放暂停与继续

    背景音乐播放暂停与继续似乎我们很少使用,事实上也正是如此,背景音乐播放暂停与继续实例代码如下: SimpleAudioEngine::getInstance()->pauseBackground ...

  2. 关于h5中背景音乐的自动播放

    音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <sou ...

  3. App中h5音频不能播放问题

    前置:以下问题是针对vue项目的解决方案 问题一:IOS中音频不能自动播放 原因:ios禁止了音频自动播放 解决办法:在vue的生命周期mounted中获取音频Dom并调用音频播放方法play(),注 ...

  4. 如何安装整个linux系统中所需要的mp3播放库插件? 可以在安装rpmfusion仓库后直接通过dnf install进行按照就可以了

    在vi的界面中, 前面的数字, 表示一行. 而对于中文而言, 并不一定是"一个文本行"就是一行, 而是以 回车(硬回车)为标志, 来判定一行的. 而dd, yy等也是以" ...

  5. MP3中设置播放顺序的软件《闪存式MP3伴侣》

    给姥爷买了一个插卡音箱,里面拷贝了几百段评书,每一段评书都是一个mp3文件,虽然插卡音箱会自动一个文件一个文件自动播放,可是比较郁闷的是评书的播放顺序完全是乱的,毫无规律可寻,本来我的mp3文件的文件 ...

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

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

  7. h5中的audio音频标签与对应的dom对象

    HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象. H5中的<audio>标签 此标签是H ...

  8. C# MP3播放帮助类

    本文为原创文章如需转载请注明出处: /// <summary> /// ************************************************* /// 类名:M ...

  9. MP3播放器团队项目

    一.设计思路 程序要求能播放MP3文件,因此需调用库中的播放方法:右键工具箱选择项,添加com组件,选择window media player后工具箱就会多一个控件,然后拖到窗体中就OK了.另在窗体中 ...

随机推荐

  1. UI:归档、反归档、数据持久化

    支持的文件读写类型:字符串.数组.字典.NSdata  (可变的.不可变的.共有8个类) 对于数组.字典在写入文件时,其中的元素也必须是以上四种类型之一. 支持的数据类型有限.且简单 写入文件: 字符 ...

  2. bzoj 3784: 树上的路径【点分治+st表+堆】

    参考:https://www.cnblogs.com/CQzhangyu/p/7071477.html 神奇的点分治序(或者叫点剖?).就是把点分治扫过的点依次放进队列里,然后发现,对于每一棵树摊到序 ...

  3. USACO Training3.3 A Game【区间Dp】 By cellur925

    题目传送门 一股浓浓的博弈论香气...然而本蒟并不会博弈论. 开始用双端队列+假的dp水过了24pts水数据. 其实是布星的,两人都绝顶聪明会深谋远虑不像我只看眼前,所以上述算法错误. 正解:区间dp ...

  4. Trie树的小应用——Chemist

    题意(自己编的): 给你一篇文章,包含n个长度为Si的单词,然后给你m组询问,每次询问一个单词在这篇文章中作为单词前缀出现的次数.n <=10^6,m<=10^6,Si<=100. ...

  5. ssh 公钥登录远程主机 并禁止密码登录

    https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys-on-centos7 如果在新的机器上,得先用密码登录一 ...

  6. Golang 入门 : 理解并发与并行

    Golang 的语法和运行时直接内置了对并发的支持.Golang 里的并发指的是能让某个函数独立于其他函数运行的能力.当一个函数创建为 goroutine 时,Golang 会将其视为一个独立的工作单 ...

  7. python系列1_travel

    Python__copy copy模块用于对象的拷贝操作.该模块只提供了两个主要的方法:copy.copy与copy.deepcopy,分别表示浅复制与深复制. 浅拷贝(copy):拷贝父对象,不会拷 ...

  8. Jmeter常见问题汇总(不断更新ing)

    1.测试计划中有多个线程组执行时,为了防止线程组间的相互干扰,需要如下设置一下:     2,接口测试中的上传字段为汉字时需要进行什么形式的转码? 方法一:需要把编码复选框勾选,才能正常通过接口查询数 ...

  9. MFC显示文本文档 分类: MFC 2014-12-30 10:03 457人阅读 评论(1) 收藏

    新建基于对话框的MFC应用程序.资源视图的对话框上添加编辑框(Edit Control)和按钮(Button), 将编辑框属性:Mutiline.Auto HScroll.Auto VScroll设为 ...

  10. [BUG]Dreamweaver6做网页的一个图片文字不清晰的问题

    自己用Dreamweaver6做一个网页,使用PS做图片,为了节约下载流量,我把图片裁剪为GIF格式,通过系统自带的图片浏览器和美图看看,图片上的文字都是清晰的. 我把图片加载进入DW中后,在DW界面 ...