0.基本配置
音乐图片百度云链接
密码: 8e8e
图片
music.gif
music_no.png
music_off.png
1.css内容
<style> #audio_btn { position: fixed; right: 8px; top: 0; z-index: 200; display: none; width: 32px; height: 32px; background-repeat: no-repeat; cursor: pointer; } .play_yinfu { position: fixed; right: 10px; float: right; top: 1px; width: 30px; height: 30px; background-image: url("/images/music.gif"); background-repeat: no-repeat; background-position: center center; background-size: 60px 60px; } .rotate { position: fixed; right: 10px; float: right; top: 1px; width: 30px; height: 30px; background-size: 100% 100%; background-image: url("/images/music_off.png"); -webkit-animation: rotating 1.2s linear infinite; -moz-animation: rotating 1.2s linear infinite; -o-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotating { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } .off { position: fixed; right: 10px; float: right; top: 1px; background-size: 100% 100%; background-image: url("/images/music_no.png"); background-repeat: no-repeat; background-position: center center; } </style>
2.html内容
<!--音乐--> <div class="video_exist play_yinfu" id="audio_btn" style="display: block;z-index:999999;"> <div id="yinfu" class="rotate"></div> <audio preload="auto" autoplay="" id="media" src="" autoplay preload loop="loop"></audio> </div>
3.js代码
function audioAutoPlay(id) { var audio = document.getElementById(id); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay('media'); $(function() { var audio = $('#media'); audio[0].play(); $("#audio_btn").bind('click', function() { $(this).hasClass("off") ? ($(this).addClass("play_yinfu").removeClass("off"), $("#yinfu").addClass("rotate"), $("#media")[0].play()) : ($(this).addClass("off").removeClass("play_yinfu"), $("#yinfu").removeClass("rotate"), $("#media")[0].pause()); }); });
标签:
html页面加上背景音乐自动播放