类似于易企秀的页面, 要求打开的时候有音乐自动播放, 点击可以暂停.
html 代码
- <audio autoplay="autoplay" loop="loop" id="autoPlayMuc">
- <!-- 此处应放入不同格式的文件以兼容各种浏览器 -->
- <source src="muc.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
- </audio>
- <div class="pauseBtn rotate"> </div>
CSS 代码
- .pauseBtn{
- background: url(images/muc_1.png) no-repeat;
- background-size: 100% 100%;
- position: fixed;
- z-index: 100;
- width: 30px;
- height: 30px;
- top: 15px;
- right: 15px;
- }
- .rotate{
- -webkit-animation:rotate 3s infinite linear ;
- animation:rotate 3s infinite linear ;
- }
- @-webkit-keyframes rotate{
- 0%{transform: rotate(0deg);}
- 100%{transform: rotate(360deg);}
- }
- @keyframes rotate{
- 0%{transform: rotate(0deg);}
- 100%{transform: rotate(360deg);}
- }
javascript 代码
- (function() {
- function autoPlayAudio(ele) {
- var wxTimmer=setInterval(function(){
- if (WeixinJSBridge!==undefined) {
- clearInterval(wxTimmer);
- WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
- // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
- // alert(e.err_msg);
- ele.play();
- });
- }
- },200);
- }
- // 调用时传入一个原生 audio 元素
- autoPlayAudio(document.getElementById("autoPlayMuc"));
- var pause=true;
- document.getElementsByClassName("pauseBtn")[0].onclick=function(){
- if (pause) {
- pause=false;
- document.getElementById("autoPlayMuc").pause();
- this.style.background="url(images/muc_2.png) no-repeat";
- this.style.backgroundSize="100% 100%";
- }else{
- pause=true;
- document.getElementById("autoPlayMuc").play();
- this.style.background="url(images/muc_1.png) no-repeat";
- this.style.backgroundSize="100% 100%";
- }
- }
- })();
来源: http://www.qdfuns.com/article/15097/341fdd8fe2bdb27e43f607ba7eb3ddea.html