朝夕ing
2017-03-09 19:00
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;
}
这个不兼容啊
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 事件就可以亲也试一下
HTML5+CSS3实现春节贺卡
110213 学习 · 492 问题
相似问题
回答 2
回答 2