点击图片背景音乐开始暂停，图片旋转停止

//css部分

.MusicImg {
position: fixed;
top: 2%;
z-index: 999;
width: 40px;
height: 40px;
right: 3%;
-webkit-animation: rotateImg 1s linear infinite;
vertical-align: middle;
}
@keyframes rotateImg {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

@-webkit-keyframes rotateImg {
0% {
-webkit-transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
}
}

 

//html部分

<img src="img/hongbaoyu.png" class="MusicImg" οnclick="MusicImg()" />
<div class="audio-box" style="display: none">
<audio id="myaudio" src="img/hongbaoyu.mp3" loop="loop" autoplay="autoplay" controls="controls">
你的浏览器不支持HTML5
</audio>
</div>

 

//js部分

function MusicImg() {
var oAudio = document.getElementById('myaudio');
if (oAudio.paused) {
oAudio.play();
$(".MusicImg").css("-webkit-animation", "");
}
else {
oAudio.pause();
$(".MusicImg").css("-webkit-animation", "rotate 6s linear infinite");
}
}

 

//解决苹果手机无法自动播放

$(function () {
document.addEventListener("WeixinJSBridgeReady", function () {
$('#myaudio')[0].load();
$('#myaudio')[0].play();
}, false);
})

转载于:https://www.cnblogs.com/yyy251/p/9039390.html