zoukankan      html  css  js  c++  java
  • 【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 {
                 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;
                 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;
       10%;
      height: 15%;
      position: fixed;
      z-index: 99;
     }
  • 相关阅读:
    2015hust暑假集训 0715 F
    hust2015暑假集训 0715 c a coprime
    0714c
    hdu_1019Least Common Multiple(最小公倍数)
    hdu_1576A/B(扩展欧几里得求逆元)
    hdu_5104 Primes Problem()
    hdu_3483A Very Simple Problem(C(m,n)+快速幂矩阵)
    hdu_2604Queuing(快速幂矩阵)
    hdu_3003Pupu(快速幂)
    神奇的读入读出
  • 原文地址:https://www.cnblogs.com/kangshuai/p/5278037.html
Copyright © 2011-2022 走看看