.bgm-btn {
position: absolute;
top: 16px;
right: 16px;
width: 30px;
height: 30px;
background-size: 100%;
background-image: url("http://s3img.city.sina.com.cn/activity/common/large/9f9acca088ab3e67f12eb612bdd12c07.png");
z-index: 1;
-webkit-animation: myrotate 5s linear 0s infinite normal;
}
.bgm-btn.mut{ background-position: 0px -30px; -webkit-animation: none;}
@-webkit-keyframes myrotate {
0% { -webkit-transform:rotate(0deg);}
25% { -webkit-transform:rotate(-90deg);}
50% { -webkit-transform:rotate(-180deg);}
75% { -webkit-transform:rotate(-270deg);}
100% { -webkit-transform:rotate(-360deg);}
}<audio src="http://jiangsu.sinaimg.cn/zt/s/yxqxwspds/mobile/bgmcut.mp3" autoplay="autoplay" loop style="display: none; width: 0; height: 0;"></audio>
<div class="bgm-btn"></div>
<script type="text/javascript">
var firstTouch = true;
$('body').on("touchstart",function(e){
if ( firstTouch ) {
firstTouch = false;
document.getElementById('bgm').play();
}else{
return;
}
});
$(".bgm-btn").on("touchstart",function(e){
//e.preventDefault();
//e.stopPropagation();
var dom = document.getElementById('bgm');
if( dom.paused ){
dom.play();
$(".bgm-btn").removeClass("mut");
}else{
dom.pause();
$(".bgm-btn").addClass("mut");
}
});
</script>
