點擊光盤后音樂停止,可是光盤還是會變形
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; }
2017-03-09
這個不兼容啊
2017-03-09
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 事件就可以親也試一下