<!--音乐-->
<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. bzoj 1997: [Hnoi2010]Planar【瞎搞+黑白染色】

    脑补一下给出的图:一个环,然后有若干连接环点的边,我们就是要求这些边不重叠 考虑一下不重叠的情况,两个有交边一定要一个在环内一个在环外,所以把相交的边连边,然后跑黑白染色看是否能不矛盾即可(可能算个2 ...

  2. VMware 12安装Mac OS X 10.11&解决上网的问题

    近日想在Win10上安装Mac OS 玩玩,于是上网搜了相关资源,查看了相关经验分享,开始着手安装.系统很快成功安装,但最大问题是虚拟机中的Mac OS无法上网.费了很长时间,最终看到Ping通结果, ...

  3. django 网站项目测试

    视图和 URL 配置: 在先前创建的 meishiweb目录下的 meishiweb 目录新建一个 view.py 文件,并输入代码: 此时在浏览器即可访问: 证明已经成功 我们也可以修改成以下的规则 ...

  4. 题解报告:hdu 1160 FatMouse's Speed(LIS+记录路径)

    Problem Description FatMouse believes that the fatter a mouse is, the faster it runs. To disprove th ...

  5. JD商家后台管理的细节

    1: 宝贝主图和滚动图都是800px,只有刚好这么多时才能得到显示,否则不会显示. 2:宝贝描述图只支持750px, 只有这么多时才能得到显示, 刚开始不知道, 上传图片上去后, 发现始终无法显示, ...

  6. domain admin域管理员

    当计算机加入到域后,默认将"Domain Admins"组赋予了本地系统管理员的权限.也就是说,在计算机添加到域,成为域的成员主机的过程中,系统将会自动把"Domain ...

  7. 特性property

    #property装饰器用于将被装饰的方法伪装成一个数据属性,在使用时可以不用加括号而直接引用# class People:# def __init__(self,name,weight,height ...

  8. vue报错-Error: Cannot find module '@babel/core'

    vue之webpack实战的时候遇到报错,Error: Cannot find module '@babel/core' 这报错,我百度了很久,后来发现报错里面有提示,发现是我的 babel-load ...

  9. Android ImageView setImageBitmap 不显示图片

    从sd卡里读出图片后有时调用setImageBitmap(bitmap)方法会显示不出图片,仔细考虑过后原来是加载的图片过大导致的,解决办法为: BitmapFactory.Options op = ...

  10. 公众号如何获取已关注用户的unionid的问题

    避免误导,先加一句:首先,得公众号绑定开放平台 这个问题困扰了我一早上,我尝试了很多次获取unionid都失败. 微信的开发文档上有说: 关于特殊场景下的静默授权 1.上面已经提到,对于以snsapi ...