文档章节

css特效之旋转音乐播放器

o
 osc_y8yehimr
发布于 2019/03/19 09:45
字数 318
阅读 31
收藏 0

精选30+云产品,助力企业轻松上云!>>>

本次需要用到的知识点有:

  1. transform
  2. setInerval

怎么添加背景音乐我会在下一篇介绍 https://www.cnblogs.com/zouwangblog/p/11138734.html

使用场景:在移动端页面上方添加一个旋转的音乐图标,音乐暂停,停止旋转,音乐播放,继续旋转,这里使用的是vue。

原理:原理很简单,使用setInerval函数来让图片每100ms旋转一次,旋转用css中的transform方法,将旋转角度设置为全局变量,这样在暂停之后继续播放能接着上次的位置继续旋转

  <div>
      <audio :src="mus" class="media-audio" loop autoplay ref="MusicPlay"></audio>
      <img :src="musicLogo" class="musicLogo" @click="musicPause" :style="{transform: musicRotate}"/>   //音乐播放
      <img v-show="musicTF" :src="off" class="musicLogo" @click="musicPlay"/>                           //音乐暂停
    </div>

需要用到的变量

 musicTF: false,//是否显示禁止播放
 musicNum: 0,//初始旋转角度
 musicRotate: "rotate(" + 0 + "deg)",
 interval: null,//定时器

使用方法

/**
       * 暂停音乐并停止旋转
       */
      musicPause() {
        this.$refs.MusicPlay.pause();
        this.musicTF = true;
        if (this.interval !== null) {
          clearInterval(this.interval);  //停止定时器
        }
      },

      /**
       * 播放音乐并开始旋转
       */
      musicPlay() {
        this.$refs.MusicPlay.play();
        this.musicTF = false
        this.countMusicNum();
      },

      /**
       * 设置定时器旋转,这个是放在mouted方法中,需要页面一加载就旋转
       */
      countMusicNum() {
        let that = this;
        that.interval = setInterval(function () {
          that.musicNum = that.musicNum + 10;
          that.musicRotate = "rotate(" + that.musicNum + "deg)";
        }, 100);
      },

效果图

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
【全网最全的博客美化系列教程】19.旋转立方体的实现

全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客...

osc_dv39i788
02/07
2
0
【全网最全的博客美化系列教程】19.旋转立方体的实现

全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客...

Angel_Kitty
02/07
0
0
【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客...

osc_8ouyb53z
2018/07/27
4
0
前端静态网页模板

1.站长之家(比较全的网站,包括模板、脚本、特效,内容多、精、新) 模板:http://sc.chinaz.com/moban/ 脚本(含特效):http://sc.chinaz.com/jiaoben/ JQuery脚本:http://sc.chinaz.co...

长颈鹿的倔强
2018/10/14
760
0
css实现div一直旋转

看到音乐播放器播放界面的唱片一直旋转,突然想到在网页中的一直旋转效果,所有特地查了一下分享出来 这是一个静态的div,然后把它旋转动起来。效果请看右上角的音乐播放按键一样。 代码如下:...

osc_ve0sxjnb
2018/06/12
2
0

没有更多内容

加载失败,请刷新页面

加载更多

63. Unique Paths II

题目: 63. Unique Paths II A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The robot can only move either down or right at any p......

JiaMing
37分钟前
30
0
前后端分离了,跨域问题怎么处理?

利用Nginx反向代理解决跨域问题 使用jsonp 来进行解决,不推荐,老项目可以使用此方案,但是发送的http 请求体有大小限制,并且发送方式为get方式,大小限制、不安全。 服务器代理 CORS 请求...

SpringForA
39分钟前
19
0
Hacker News 简讯 2020-07-10

更新时间: 2020-07-10 00:00 How to track and display profile views on GitHub - (rushter.com) 如何在GitHub上跟踪和显示概要视图 得分:80 | 评论:36 XMEMS Announces World's First Mon......

FalconChen
53分钟前
97
1
如何在Java中将文本追加到现有文件 - How to append text to an existing file in Java

问题: I need to append text repeatedly to an existing file in Java. 我需要将文本重复添加到Java中的现有文件中。 How do I do that? 我怎么做? 解决方案: 参考一: https://stackoom...

fyin1314
昨天
12
0
Eclipse HotKey:如何在选项卡之间切换? - Eclipse HotKey: how to switch between tabs?

问题: How can I switch between opened windows in Eclipse? 如何在Eclipse中打开的窗口之间切换? There is Ctrl + F6 , but it's asking me which one I want, but I want switch it lik......

富含淀粉
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部