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

最新推荐文章于 2022-12-21 09:28:25 发布
最新推荐文章于 2022-12-21 09:28:25 发布
阅读量4.5k 收藏 14
点赞数
分类专栏： 典型小案例 文章标签： 音乐播放，图标转动，点击音乐停止，图标不动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanghl150426/article/details/82149334
版权

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

zhanghl150426
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
音乐应用_音乐播放器常用图标.zip
12-28
音乐应用，音乐播放器常用图标 极简图标、线形图标、音乐播放器图标
css3动画应用-音乐唱片旋转播放特效
weixin_30415113的博客
07-25 2813
css3动画应用-音乐唱片旋转播放特效 核心点： 　　1、设置图片为圆形居中，使图片一直不停旋转。 　　2、文字标题（潘玮柏--反转地球）一直从左到右不停循环移动。 　　3、点击图标，音乐暂停，图片停止旋转；点击图片，音乐播放，图片开始旋转。 1、动设置图片为圆形居中，使图片一直不停旋转。 核心代码： #xuanzhuan{ -webkit-animation: pla...
html5旋转音乐图标，控制背景音乐jquery.rotate
05-31
仿照易企秀制作html5背景音乐控制按钮，可以暂停，开始h5中的背景音乐
js音乐播放、歌词、动效、图片旋转（手机模板放弃之作，仅供参考）
qq_40237472的博客
01-12 691
百度云盘： 链接：https://pan.baidu.com/s/1ibSIpOCpaHODxf5aqe4TxA 提取码：12hv 复制这段内容后打开百度网盘手机App，操作更方便哦 <!DOCTYPE html> <html> <head> <meta name="viewport" content=" width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1....
java音乐播放器脚本之家_JavaScript实现简单音乐播放器
weixin_32581787的博客
02-26 338
该篇文章会教你通过JavaScript制作一个简单的音乐播放器。包括播放、暂停、上一曲和下一曲。阅读本文章你需要对HTML、CSS和Javascript有基本的了解。话不多说，先上图。这样看起来有点单调。我们把它加在网页上试试。具体效果可以去我的个人网站查看http://tcxqq.top好了，成品已经展示了接下来，开干吧！Document 0:00/0:00先建好基本的HTML框架。为我们的...
HTML+Javascript实现点击图片自动播放背景音乐
12-27
用HTML+Javascript实现点击图片自动播放背景音乐。精巧实用，值得参考！
CSS实现图片旋转&暂停时保持旋转状态（可用于音乐播放）
weixin_46835329的博客
03-11 3038
CSS实现图片旋转&暂停时保持旋转状态（可用于音乐播放）一级目录 一级目录 .musicImgRotate { animation: rotate 6s linear infinite; } @keyframes rotate { 0% { transform: rotateZ(0deg); /*从0度开始*/ } 100% { transform: rotateZ(360deg); /*360度结束*/ } } ...
【CSS3】---- 纯 css 控制 html5旋转音乐图标，控制背景音乐
止于至善
07-07 1410
2. 无限旋转 3. 停止动画 4. 实现className的切换 1. JS 实现播放和暂停的切换 HTML JS 2. JQUERY 实现 3. VUE 实现 JS 5. 总结 注意：此文章只是单纯实现音乐图标的旋转和暂停的切换，没有对背景音乐的暂停和播放进行处理； css3 的动画功能很强大，但是同时需要我们处理好不同浏览器的兼容性处理！ WXRUI体验二维码 我的博客，欢迎交流！我的CSDN博客，欢迎交流！微信小程序专栏前端笔记专栏微信小程序实现部分高德地图功能的DEMO下载微
html 实现点击按钮播放音乐
weixin_42593701的博客
12-21 3071
在 HTML 中播放音乐需要使用 <audio> 标签。要让按钮点击时播放音乐，你可以使用 JavaScript 实现。 首先，在 HTML 中添加一个 <audio> 标签，并将音乐文件指定为该标签的 src 属性。例如： <audioid="myAudio" src="myMusic.mp3"></audio> ...
HTML点击图片播放音乐
热门推荐
wuxin
10-04 2万+
       很多小伙伴都会用HTML来编写一些网页，如何让网页变得更有美感，增加一个背景音乐就很有必要了。 这里给大家介绍一个我自己用的方法：点击图片播放音乐，再次点击则停止音乐. 1.我们需要将用到的音频文件导入到我们的网页中 <audio id="music" src="music/yinanping.flac" l...
超简单的点击图片播放音乐
01-16
原生JavaScript网页mp3播放器控件，超级简单的点击图片播放mp3。
HBuilder：微信h5实现音乐图标旋转播放，停止暂停
01-15
HBuilder：微信h5实现音乐图标旋转播放，停止暂停HBuilder：微信h5实现音乐图标旋转播放，停止暂停HBuilder：微信h5实现音乐图标旋转播放，停止暂停
利用JAVASCRIPT点击按钮播放音乐
07-16
利用JAVASCRIPT点击按钮播放音乐。
html5 单个按钮控制音乐播放
12-21
利用js控制html5中音乐的播放和暂停。很作用的
音乐播放器，播放，暂停，上一曲，下一曲
09-06
音乐播放器，播放，暂停，上一曲，下一曲音乐播放器，播放，暂停，上一曲，下一曲音乐播放器，播放，暂停，上一曲，下一曲音乐播放器，播放，暂停，上一曲，下一曲音乐播放器，播放，暂停，上一曲，下一曲音乐播放器，播放，暂停，上一曲，下一曲音乐播放器，播放，暂停，上一曲，下一曲
安卓学习者音乐播放器音乐图标文件
01-08
美化按钮样式博客https://blog.csdn.net/u011027547/article/details/122379469 图标文件资源
jQuery点击图标播放mp3音乐代码
06-10
这是一款很个性化的jQuery点击图标播放mp3音乐代码，基于html5 Audio属性制作的网页音乐播放器，支持列表布局形式排列，只能同时播放一首音乐。
H5背景音乐播放暂停加图标自动旋转功能，支持微信内自动播放代码实例
12-16
实现html页面背景音乐自动播放，右上角增加播放图标状态显示，支持暂停，使用最新微信JDK支持微信内打开自动播放功能
vue3如何点击图标播放音乐暂停音乐
最新发布
06-09
要实现在 Vue3 中点击图标播放音乐并且暂停音乐，你可以按照以下步骤操作： 1. 首先，你需要在 Vue3 中引入音频文件。 ```javascript import audioFile from "@/assets/audio/music.mp3"; ``` 2. 在 template 中，你可以使用 `<i>` 标签作为图标，并添加一个点击事件来触发播放音乐，并通过 `v-if` 来控制是否显示暂停图标。 ```html <template> <div> <i class="icon" v-if="!isPlaying" @click="playMusic"></i> <i class="icon" v-else @click="pauseMusic"></i> </div> </template> ``` 3. 在 script 中，你可以定义 `isPlaying` 数据来控制是否正在播放音乐，并定义 `playMusic` 和 `pauseMusic` 方法来播放和暂停音乐。 ```javascript <script> export default { data() { return { isPlaying: false, audio: null, }; }, methods: { playMusic() { this.audio = new Audio(audioFile); this.audio.play(); this.isPlaying = true; }, pauseMusic() { this.audio.pause(); this.isPlaying = false; }, }, }; </script> ``` 这样，当用户点击图标时，音乐将开始播放，同时图标会变成暂停图标。当用户再次点击暂停图标时，音乐将暂停，同时图标会变成播放图标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值