首页 > 代码库 > H5页面背景音乐,C33 360°旋转效果
H5页面背景音乐,C33 360°旋转效果
我现整理了一下代码:
Demo
点击Icon暂停,再次点击继续。
HTML代码如下:
1 <div id="audio_btn" class="rotate">2 <audio loop src="http://www.mamicode.com/bg_audio.mp3" id="media" autoplay="" preload=""></audio>3 </div>
CSS代码如下:
1 #audio_btn { 2 width: 30px; 3 height: 30px; 4 background-image: url(normalmusic.svg); 5 background-size: contain; 6 } 7 8 .rotate { 9 -webkit-animation: rotating 1.2s linear infinite;10 -moz-animation: rotating 1.2s linear infinite;11 -o-animation: rotating 1.2s linear infinite;12 animation: rotating 1.2s linear infinite13 }14 15 @-webkit-keyframes rotating {16 from { -webkit-transform: rotate(0) }17 to { -webkit-transform: rotate(360deg) }18 }19 20 @keyframes rotating {21 from { transform: rotate(0) }22 to { transform: rotate(360deg) }23 }24 @-moz-keyframes rotating {25 from { -moz-transform: rotate(0) }26 to { -moz-transform: rotate(360deg) }27 }
使用了Keyframes 结合 transfrom 来实现CSS 360°旋转效果。
JS代码如下:
1. 实现点击图标,旋转暂停,再点击再旋转
1 $("#audio_btn").click(function(){2 $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停3 })
2. 图片暂停的同时,实现背景音乐也暂停,图片旋转的时候,音乐也继续播放。
结合上面的代码,修改如下:
1 var x = document.getElementById("media"); 2 $(function(){ 3 $("#audio_btn").click(function(){ 4 $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停 5 6 //控制背景音乐 播放或暂停 7 if($(this).hasClass("rotate")){ 8 x.play(); 9 }else{10 x.pause();11 }12 })13 });
因为H5的audio/video自带pause()和play()的方法,我们直接调用就可以了。但需要注意的是,它不是jquery的方法,如果直接写成$(audio_btn).find("audio").pause(),是无效的。所以要用原生JS DOM来写。
H5页面背景音乐,C33 360°旋转效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。