音樂播放，圖示轉動，點選音樂停止，圖示不動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{padding:0;margin:0;}
/*定義*/
@-webkit-keyframes rotatae{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/*呼叫*/
div{
width:50px;
height:50px;
background:blue url(images/1.jpg);
background-size:100% 100%;
-webkit-animation-name:rotatae;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
position:fixed;
right:10px;
top:10px;
}
</style>
</head>
<body>
<div id="icon"></div>
<!-- autoplay 自動播放 loop 迴圈播放 controls 控制元件 -->
<audio id="audio" src="audio.mp3">此瀏覽器不支援audio</audio>
</body>
<script src="js/jquery1.7.js"></script>
<script>
//點選圖示停止轉動，再次點選開始轉動
// var audio=document.getElementById("audio");
// audio.play()
//jquery轉化為js $("")[0] $("").get(0)
$("#audio").get(0).play();
var flag=false;
$("#icon").click(function(){
if(!flag){
//$(this).css({"-webkit-animation-iteration-count":"0"});
$(this).css({"-webkit-animation-play-state":"paused"});
//音樂停止
$("#audio").get(0).pause();
flag=true;
}else{
//$(this).css({"-webkit-animation-iteration-count":"infinite"});
$(this).css({"-webkit-animation-play-state":"running"});
//音樂播放
$("#audio").get(0).play();
flag=false;
}
})
</script>
</html>