javascript - jeda keadaan main balik animasi css mudah alih tidak berfungsi pada ios animation-play-state
给我你的怀抱
给我你的怀抱 2017-06-26 10:53:05
0
1
1216

Jeda keadaan main balik animasi css mudah alih tidak berfungsi pada ios animation-play-state

Saya mahu klik pada gambar untuk menghentikannya, dan klik pada gambar sekali lagi untuk terus berputar. Ia boleh dicapai pada telefon Android, tetapi pada iOS, apabila anda mengklik gambar untuk kali pertama, ia akan terus berputar tanpa sebarang pergerakan statik Sebaliknya, apabila anda mengkliknya untuk kali kedua, gambar akan berkelip pada kedudukan daripada klik pertama dan teruskan berputar.

<style type="text/css">
#wls .musicCon{width: 35px;height: 35px;position:fixed;top:15px;right:15px;z-index: 9999; }
 img.rotate{
     animation:spin 4s infinite linear;
     -moz-animation:spin 4s infinite linear;
     -webkit-animation:spin 4s infinite linear;
        -webkit-animation-play-state: running;
       -moz-animation-play-state: running;
       animation-play-state: running;
       -ms-animation-play-state: running;
       -o-animation-play-state: running;
}
@keyframes spin {
     0%{
      transform:rotate(0deg);
     }
     100%{
       transform:rotate(360deg);
     }
}
@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }
    100%{
       -o-transform:rotate(360deg);
     }
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
     100%{
       -moz-transform:rotate(360deg);
     }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform:  rotate(0deg);
    }
    100%{
       -webkit-transform:rotate(360deg);
     }
}
 img.pauseWalk {
    animation:spin 4s infinite linear;
   -moz-animation:spin 4s infinite linear;
   -webkit-animation:spin 4s infinite linear;
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   animation-play-state: paused;
   -ms-animation-play-state: paused;
   -o-animation-play-state: paused;
}
</style>
<body style="background:#fff" id="wls"> 
        <img src="imgage/music.png" class="musicCon rotate" />
         <audio autoplay="autoplay" loop="loop" id="bgm">
          <source src="music/bgm.mp3" type="audio/mpeg">
          <source src="music/bgm.ogg" type="audio/ogg">
        </audio>
        <script> 
        var num=1;
            $("#wls .musicCon").bind("click",function(){
                if(num==1){
                    $(this).removeClass("rotate");
                    $(this).addClass("pauseWalk");
                    $("#bgm")[0].pause();
                    num++;
                    return num;
                }else{
                    $(this).removeClass("pauseWalk");
                    $(this).addClass("rotate");
                    $("#bgm")[0].play();
                    num=1;
                    return num;
                }
            })
        </script>
</body>
给我你的怀抱
给我你的怀抱

membalas semua(1)
给我你的怀抱

Pada iOS animation-play-state adalah tidak sah.

Anda boleh tindih status Berikut ialah contoh:
Pautan penerangan

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan