点击图片背景音乐开始暂停，图片旋转停止
//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" onclick="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);
})
1、使用flv.js做直播
2、dart中类的继承
3、树结构基础篇
4、由浅入深学习PBR的原理和实现
5、Spark Netty 通信框架解析