标签：
我们经常在访问H5页面（比如电子贺卡、动态音乐相册等）的时候，会看到右上角有个自转的音乐图标，点击可以控制音乐是否播放，那这个效果是如何实现的呢？
Demo
HTML代码如下：
1 <div id="audio_btn" class="rotate"> 2 <audio loop src="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 infinite 13 } 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自转效果。
（我的另一篇关于keyframes文章 http://www.cnblogs.com/shizq/p/5063610.html）
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来写。
标签：
原文地址：http://www.cnblogs.com/shizq/p/5658539.html
