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);} }
你都还没控制music的class,怎么会停呢,还有就是有两句后面怎么会没有分号的
music.addEventListener("touchstart",function(event) {
if (audio.paused) {
audio.play();
this.setAttribute("class","play");
}else{
audio.pause();
this.setAttribute("class","");
};
},false);
<div class="music">
<img id="music" class="play" src="images/music_disc.png" />
<img src="images/music_pointer.png" />
</div>