<!--音乐-->
<div id="music">
<img src="../img/music.gif" class="m" />
<img src="../img/music_off.png" class="off" />
<!--<audio src="../mp3/bgmusic.mp3" loop="loop" preload="auto" autoplay="autoplay" class="bgmusic">你的浏览器不支持audio标签.</audio>-->
</div>
<!--end-->
#music {
width: 0.8rem;
height: 0.8rem;
position: fixed;
top: 0.2rem;
right: 0.3rem;
z-index: 9999;
background-size: contain;
text-align: center;
}
@keyframes music {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#music img.m{
width: 100%;
height: 100%;
}
#music img.off {
position: absolute;
top: 25%;
left: 25%;
transform: translateX(-50%);
animation: music 2s linear infinite;
}
<script type="text/javascript">
$(function(){
var play=true;
$("#music").click(function(e){
if(play==true){
$(".m").hide();
$(".off").CSS({
"transform":"rotate(0deg)",
"animation":"music 0s"
})
$(".bgmusic").get(0).pause();
play=false;
}else{
$(".m").show();
$(".off").css({
"animation":"music 2s linear infinite"
})
$(".bgmusic").get(0).play()
play=true;
}
})
})
</script>
来源: http://www.bubuko.com/infodetail-2470908.html