点击光盘后音乐停止,可是光盘还是会变形

来源:3-10 移动端项目开发——交互(music停止)

朝夕ing

2017-03-09 19:00

window.onload = function () {
    var music = document.getElementById("music");
    var audio = document.getElementsByTagName("audio")[0];

    audio.addEventListener("ended", function (event) {
        music.setAttribute("class", "");
    }, false);

    music.addEventListener("touchstart",function (event) {
        if (audio.paused) {
            audio.play();
            this.setAttribute("class"," music_play");
            //this.setAttribute("class","music_play");   //停止时变形
            // this.style.animationPlayState="running";   兼容性不行
        }
        else {
            audio.pause();
            this.setAttribute("class","");
            //this.style.animationPlayState="paused";
        }
    },false);
};

CSS部分:

.music > img.music_disc {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 79%;
    margin: auto;
    z-index: 0;
}

.music > img.music_play {
    -webkit-animation: music_disc 4s linear infinite;
    -o-animation: music_disc 4s linear infinite;
    animation: music_disc 4s linear infinite;
}


写回答 关注

2回答

  • 朝夕ing
    2017-03-09 22:14:09

    这个不兼容啊

  • qq_只如初见_9
    2017-03-09 20:45:10

    music.onclick = function(){

    if (audio.paused) {

    audio.play();

    // this.setAttribute("class","play");

     this.style.webkitAnimationPlayState="running";

    }else{

    audio.pause();

    // this.setAttribute("class","");

        this.style.webkitAnimationPlayState="paused";

    };

    };我添加的是onclick 事件就可以亲也试一下


HTML5+CSS3实现春节贺卡

又逢新春佳节,春节贺卡搞起来,学会HTML5+CSS3实现春节贺卡

110033 学习 · 450 问题

查看课程

相似问题