H5页⾯背景⾳乐，C33360°旋转效果
在做H5页⾯的时候，经常会需要⽤到背景⾳乐，⽐如电⼦贺卡、动态⾳乐相册等，右上⾓有个360°旋转的⾳乐图标，点击可以控制⾳乐是否播放，那这个效果是如何实现的呢？
我现整理了⼀下代码：
Demo
点击Icon暂停，再次点击继续。
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
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. 图⽚暂停的同时，实现背景⾳乐也暂停，图⽚旋转的时候，⾳乐也继续播放。
结合上⾯的代码，修改如下：
1var x = ElementById("media");
2 $(function(){
3    $("#audio_btn").click(function(){
4        $(this).toggleClass("rotate"); //控制⾳乐图标⾃转或暂停
5
6//控制背景⾳乐播放或暂停
7if($(this).hasClass("rotate")){
8            x.play();
9        }else{
10            x.pause();
11        }
12    })
svg和h5的关系
13 });
因为H5的audio/video⾃带pause()和play()的⽅法，我们直接调⽤就可以了。但需要注意的是，它不是jquery的⽅法，如果直接写成$(audio_btn).find("audio").pause()，是⽆效的。所以要⽤原⽣JS DOM来写。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。