音乐播放，图标转动，点击音乐停止，图标不动

最新推荐文章于 2021-08-04 01:24:46 发布

zhanghl150426

最新推荐文章于 2021-08-04 01:24:46 发布

阅读量4.7k

点赞数

分类专栏：典型小案例文章标签：音乐播放，图标转动，点击音乐停止，图标不动

本文链接：https://blog.youkuaiyun.com/zhanghl150426/article/details/82149334

版权

典型小案例专栏收录该内容

13 篇文章

订阅专栏

该博客主要介绍了通过HTML、CSS和JavaScript实现音乐播放及图标转动效果。利用CSS的动画属性让图标旋转，使用JavaScript控制音乐播放和暂停，点击图标可切换音乐播放状态，同时图标转动也相应停止或开始。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
   
   <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>