h5 中MP3 播放暫停 jq
阿新 • • 發佈:2018-01-22
支持 contain enter music reload mp3 key scrip center
<!--音樂--> <div id="music"> <img src="../img/music.gif" class="m" /> <img src="../img/music_off.png" class="off" /> <!--<audio src="../mp3/bgmusic.mp3" loop="loop" preload="auto" autoplay="autoplay" class="bgmusic">你的瀏覽器不支持audio標簽。</audio>--> </div> <!--end-->
#music { width: 0.8rem; height: 0.8rem; position: fixed; top: 0.2rem; right: 0.3rem; z-index: 9999; background-size: contain; text-align: center; } @keyframes music { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #music img.m{ width: 100%; height: 100%; } #music img.off { position: absolute; top: 25%; left: 25%; transform: translateX(-50%); animation: music 2s linear infinite; }
<script type="text/javascript"> $(function(){ var play=true; $("#music").click(function(e){ if(play==true){ $(".m").hide(); $(".off").css({ "transform":"rotate(0deg)", "animation":"music 0s" }) $(".bgmusic").get(0).pause(); play=false; }else{ $(".m").show(); $(".off").css({ "animation":"music 2s linear infinite" }) $(".bgmusic").get(0).play() play=true; } }) }) </script>
h5 中MP3 播放暫停 jq