【1：添加音乐功能以及按钮的实:2：微信滑动页面向下滑动按钮】*************实用**************

html页面

 <div id="music" class="music">
                <audio id="music-audio" class="audio" loop="" autoplay="autoplay" preload="" src="static/music/music.mp3"></audio>
                <div class="control-after control"></div>
 </div>   

jquery

<script type="text/javascript">
$(document).ready(function() {
   //背景音乐
         var play=true;
         var m1=document.getElementById("music-audio");
         var m2=$(".control-after");
         var m=$('#music');
         //控制背景音乐
          m.click(function(){
             if(play){m1.pause();play=false; m2.removeClass('control-after') }
             else{
                 m1.play();
                 play=true;
                 m2.addClass('control-after');
                 
             }
         });                     
});
</script>

css控制

    /*音乐的控制*/
        #music {
            width: 35px;
            position: fixed;
            height: 35px;
            z-index: 2;
            bottom: 20px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        
        .control {
            background: url(../image/music.png) no-repeat;
            background-size: cover;
            width: 35px;
            height: 35px;
        }
        
        .control.control-after {
            -webkit-animation: myfirst 3s linear infinite normal;
        }
        
        @-webkit-keyframes myfirst {
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
    /*音乐的控制*/

 向下滑动按钮的实现

#img4 {
  background: url(../images/sild.png) repeat scroll;
  background-size: 100% 100%;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0%;
  display: block;
  width: 10%;
  height: 15%;
  position: fixed;
  z-index: 99;
 }