js网页点击音乐图片按钮控制音乐播放，转动

最新推荐文章于 2022-07-25 09:56:05 发布

原创最新推荐文章于 2022-07-25 09:56:05 发布 · 7.6k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#音乐按钮 #控制 #播放 #转动

JavaScript 同时被 2 个专栏收录

12 篇文章

订阅专栏

jQuery

6 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素旋转动画的方法，并通过jQuery来控制动画的暂停与播放。同时，文章展示了如何集成音频文件并使其播放状态与动画同步。这涉及到CSS动画属性、@keyframes规则以及jQuery的选择器和动画控制。

摘要生成于 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>
   <!-- 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()   
       var flag=false;
       $("#icon").click(function(){
           if(!flag){
               //$(this).css({"-webkit-animation-iteration-count":"0"});
               $(this).css({"-webkit-animation-play-state":"paused"});
               //音乐停止
               $("#audio").pause();
               flag=true;
           }else{
               //$(this).css({"-webkit-animation-iteration-count":"infinite"});
               $(this).css({"-webkit-animation-play-state":"running"});
               //音乐播放
               $("#audio").play();
               flag=false;
           }
       })
       	/*项目中运用到写法
           $(".music").click(function(){
               var music = document.getElementById("video");
               if(music.paused){
                   music.play();
                   $(this).removeClass("off");
                   $(this).css({"-webkit-animation-play-state":"running"});
               }else{
                   music.pause();
                   $(this).addClass("off");
                   $(this).css({"-webkit-animation-play-state":"paused"});
               }
           });
           */
   </script>
</html>