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

本文介绍了一种使用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>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值