H5页面背景音乐，C33 360°旋转效果 |
您所在的位置：网站首页 › icon纯音乐 › H5页面背景音乐，C33 360°旋转效果 |
|
在做H5页面的时候，经常会需要用到背景音乐，比如电子贺卡、动态音乐相册等，右上角有个360°旋转的音乐图标，点击可以控制音乐是否播放，那这个效果是如何实现的呢？我现整理了一下代码：
Demo 点击Icon暂停，再次点击继续。
HTML代码如下： 1 2 3
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°旋转效果。 （我的另一篇关于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来写。
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |