简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - jeda keadaan main balik animasi css mudah alih tidak berfungsi pada ios animation-play-state
给我你的怀抱
给我你的怀抱 2017-06-26 10:53:05
0
1
1203

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)
给我你的怀抱
给我你的怀抱2017-06-26 10:55:05 Tingkat 1

Pada iOS animation-play-state adalah tidak sah.

Anda boleh tindih status Berikut ialah contoh:
Pautan penerangan

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！