zoukankan      html  css  js  c++  java
  • 点击音频播放与暂停

     
    var music = document.getElementById('music');
    if(music.play){
     $("#music_btn").addClass("rotate");
    }
    $("#music_btn").click(function(){
            var music = document.getElementById('music');
            if(music.paused){
                music.play();
                $("#music_btn").attr("src","images/play_music.png");//播放状态图片
                $(this).addClass("rotate");
            }else{
                music.pause();
                $("#music_btn").attr("src","images/close_music.png");//暂停状态图片
                $(this).removeClass("rotate");//控制图片是否转圈圈
            }
        });
    

      

    #audio_btn.rotate img{
        animation: round 1.2s infinite ease-in-out;
        -webkit-animation: round 1.2s infinite linear;
    }
    @-webkit-keyframes round {
        0%{transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
    }
    @-moz-keyframes round {
        0%{transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
    }
    @keyframes round {
        0%{transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
    }
    

      

  • 相关阅读:
    第 12 章 Docker Swarm
    第 1 章 虚拟化
    第 0 章 写在最前面
    第 11 章 日志管理
    第 11 章 日志管理
    第 11 章 日志管理
    第 11 章 日志管理
    第 11 章 日志管理
    第 11 章 日志管理
    第 11 章 日志管理
  • 原文地址:https://www.cnblogs.com/Anne3/p/6862905.html
Copyright © 2011-2022 走看看