点击播放器暂停音乐,播放器停止在当前动画,再次点击开始播放,播放器继续旋转。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 先引入jq库文件 -->
<script src="js/jquery-3.0.0.js"></script>
<style>
img{
width: 100px;
position: fixed;
top: 10px;
left: 10px;
animation: mymove 15s infinite linear;
animation-play-state: paused;
}
.music{
animation-play-state: running;
}
@keyframes mymove{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<img src="images/aaa.png" alt="" class="music">
<audio src="media/李易峰 - 请跟我联络.mp3" autoplay></audio>
<script>
$('img').click(function(){
// 定义变量存当前状态
var cur = $(this).css('transform');
$(this).toggleClass('music');
$(this).css('transform',cur)
if($(this).hasClass('music')){
$('audio')[0].play();
// $('audio')[0].currentTime=0; //暂停之后是否重新开始播放
}else{
$('audio')[0].pause();
}
})
</script>
</body>
</html>