zoukankan      html  css  js  c++  java
  • 页面添加h5背景音乐

    <div id="audio_btn" class="rotate">
        <audio loop src="bg_audio.mp3" id="media" autoplay="" preload=""></audio>
    </div>
    
    #audio_btn {
          30px;
         height: 30px;
         background-image: url(normalmusic.svg);
         background-size: contain;
     }
     
     .rotate {
        -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(0) }
         to { -webkit-transform: rotate(360deg) }
     }
     
     @keyframes rotating {
         from { transform: rotate(0) }
         to { transform: rotate(360deg) }
     }
     @-moz-keyframes rotating {
         from { -moz-transform: rotate(0) }
         to { -moz-transform: rotate(360deg) }
     }
    
    
    
    $("#audio_btn").click(function(){
         $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
     })
    var x = document.getElementById("media"); 
     $(function(){
         $("#audio_btn").click(function(){
             $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
             
             //控制背景音乐 播放或暂停            
             if($(this).hasClass("rotate")){
                 x.play();
             }else{
                 x.pause();
             }
         })
     });
    

      

  • 相关阅读:
    iOS
    iOS
    iOS
    iOS
    iOS
    iOS
    iOS
    iOS
    iOS
    iOS
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/7508770.html
Copyright © 2011-2022 走看看