问答详情
源自:3-10 移动端项目开发——交互(music停止)

点击光盘不能停止

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

   //当音乐停止时光盘停止旋转
   audio.addEventListener("ended",function(event){
       music.setAttribute("class","");
       //music.style.animationPlayState="paused";
       //music.style.webkitAnimationPlayState="paused";
   },false);

   music.onclick=function(){
       if(audio.paused){
           audio.play()
       }else{
           audio.pause()
       }
   }

}
/*all tag*/
*{font-size: 1.5625vw;font-family: 微软雅黑;}
html,body{height: 100%;overflow: hidden;}/*music*/

.music{width: 15vw;height: 15vw;position: fixed;top: 3vh;right: 3vw;border: 4px solid #ef1639;z-index: 5;border-radius: 50%;}
.music img:first-of-type{ width: 79%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.music img:last-of-type{width: 28.421%;position: absolute;top: 24%;right: 2.5%;margin: auto;}
.play{-webkit-animation: music_disc 4s linear infinite;animation: music_disc 4s linear infinite;  }
@keyframes music_disc {0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);  } }
@-webkit-keyframes music_disc {0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);} }

提问者:慕神8909898 2016-05-05 11:22

个回答

  • chendidi
    2016-05-05 20:02:24

    你都还没控制music的class,怎么会停呢,还有就是有两句后面怎么会没有分号的

    music.addEventListener("touchstart",function(event) {

    if (audio.paused) {

    audio.play();

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

    }else{

    audio.pause();

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

    };

    },false);


  • 慕神8909898
    2016-05-05 11:23:27

    <div class="music">
       <img id="music" class="play" src="images/music_disc.png" />
       <img  src="images/music_pointer.png" />
    </div>