您当前的位置:首页  > 代码教程  > H5页面背景音乐,C33 360°旋转效果网站首页日记


正文阅读

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

发布时间:2017-12-16 17:20 Saturday编辑:BOSS

    

     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 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.freebuluo.cn/music/

关键字词HTML

版权所有:《BOSS》 => 《H5页面背景音乐,C33 360°旋转效果
本文地址:https://www.qqeg.cn/jiao/22.html
除非注明,文章均为 《QQ易学堂》 原创,欢迎转载!转载请注明本文地址,谢谢。


阅读本文后,您的心情是:
 
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注

发表评论: