旋转音乐html,H5页面背景音乐，C33 360°旋转效果

我现整理了一下代码：

Demo

点击Icon暂停，再次点击继续。

HTML代码如下：

1

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 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来写。

原文：http://www.cnblogs.com/wangking/p/5868615.html