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

最新推荐文章于 2023-04-03 19:12:59 发布

kingbow。

最新推荐文章于 2023-04-03 19:12:59 发布

阅读量7.4k

点赞数 2

分类专栏： jQuery JavaScript 文章标签：音乐按钮控制播放转动

本文链接：https://blog.csdn.net/weixin_44384778/article/details/98657383

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 1 订阅

订阅专栏

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

kingbow。

关注

2
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
js网页点击音乐图片按钮控制音乐播放，转动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>animation</title> <meta name="viewport" content="width=device-width, user-scalable...
复制链接

扫一扫

专栏目录