首页 > 代码库 > H5页面背景音乐，C33 360°旋转效果

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

2024-08-13 05:35:53   208人阅读

我现整理了一下代码：

 

 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°旋转效果


联系
我们