vue做的一个一点就转的转盘(音乐磁盘),点击停止时会在几秒内缓慢停止,再次点击按钮可以再次旋转,

先看效果:

代码:主要部分我会红线画出来

css:部分:

源码:

vue部分:

<template><div class="song-lyric"><div><div class="type"><div class="right"><div class="right-center" :class="{ 'rotates': isplay }"><div><img src="https://imagesone.oss-cn-beijing.aliyuncs.com/imagebishe/player_bar.png"class="right-top" :class="{rotated: isplay}"></div><div><img src="https://imagesone.oss-cn-beijing.aliyuncs.com/imagebishe/disc.png"class="tight-bottm" :style="{ transform: 'rotate(' + rotationAngle + 'deg)' }"></div></div></div><div class="lyric-title"><!-- 有歌词 --><!-- <el-input v-model="input" placeholder="请输入内"></el-input><el-input v-model="input" placeholder="差不多"></el-input> --><ul class="has-lyric" v-if="lyr.length" key="index"><li v-for="(item,index) in lyr" v-bind:key="index">{{item[1]}}</li></ul><!-- 没有歌词 --><div v-else class="no-lyric" key="no-lyric"><span>暂无歌词</span></div></div></div></div></div></template>
<script>import {mixin} from '../mixins';import {mapGetters} from 'vuex';export default {name: 'lyric',mixins: [mixin],data() {return {// input: '',lyr: [], //当前歌曲的歌词isplay: undefined, //获取歌曲开关状态rotationAngle: 0 // 记录盒子当前的旋转角度}},computed: {...mapGetters(['curTime', //当前歌曲播放到的位置'id', //当前播放的歌曲id'lyric', //歌词'listIndex', //当前歌曲在歌单中的位置'listOfSongs', //当前歌单列表'isPlay' //播放状态])},created() {this.isplay = this.isPlay//获取开关console.log('data', this.isplay);//获取点击图片进去歌词页面的开关状态this.lyr = this.lyric;this.rotateBox();console.log('this.lyr', this.lyr)console.log('this.mapGetters', this.mapGetters)},watch: {isPlay() {this.isplay = this.isPlayconsole.log('data', this.isplay);this.rotateBox();},id: function() {this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)},curTime: function() {if (this.lyr.length > 0) {for (let i = 0; i < this.lyr.length; i++) {if (this.curTime >= this.lyr[i][0]) {for (let j = 0; j < this.lyr.length; j++) {document.querySelectorAll('.has-lyric li')[j].style.color = '#ffffff';document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px';}if (i >= 0) {document.querySelectorAll('.has-lyric li')[i].style.color = '#95d2f6';document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px';}}}}}},methods:{rotateBox(){if(this.isplay){this.rotationAngle +=1;// if(this.rotationAngle >= 360){// 	this.rotationAngle = this.rotationAngle % 360;// }setTimeout(this.rotateBox, 20);// console.log('this.rotateBox',this.rotationAngle)}}}}
</script>
<style lang="scss" scoped>@import '../assets/css/lyric.scss';
</style>

css部分:

@import "var.scss";.song-lyric {// margin: auto;// margin-top: $header-height + 20px;width: 100%;height: 100%;// background-color: $color-white;border-radius: 12px;display: block;background-color: rgb(167, 167, 167);// padding: 0 20px 50px 20px;// background-color: rgba(0,0,0,.55);font-family: $font-family;// background-size: cover;// filter: blur(30px);z-index: 1;.lyric-title {text-align: center;width: 50%;height: 100vh;overflow-y: scroll;line-height: 60px;border-bottom: 2px solid $color-black;margin-top: 50px;// background: rgba(21, 21, 21, 0.6);background-color: rgba(0,0,0,.65);z-index: 2;}.type{display: flex;text-align: center;width: 100%;height: 100vh;overflow: hidden;line-height: 60px;border-bottom: 2px solid $color-black;z-index: 2;}.right{text-align: center;width: 50%;height: 100vh;overflow: hidden;line-height: 60px;border-bottom: 2px solid $color-black;margin-top: 50px;display: flex;justify-content: center;align-items: center;flex-direction: column;flex-wrap: wrap;// background: rgba(21, 21, 21, 0.6);background-color: rgba(0,0,0,.65);// backdrop-filter: blur(4px);// box-shadow: inset 0px 1px 6px rgba(255,255,255,0.6), 2px 2px 15px rgba(0,0,0,0.5);z-index: 2;}.right-top{ //指针position: absolute; z-index: 1; width: auto; left:45%; top:117px; height:200px;transition: transform 0.7s linear;  transform: rotate(-30deg) translate(35px , -10px); }.rotated {transform: rotate(0deg);}.right-center{position: relative;width: 600px;height: 1000px;// background-color: rgb(206, 198, 198);}.has-lyric {font-size: 18px;width: 100%;min-height: 100%;text-align: center;padding-top: 120px;li {width: 100%;height: 40px;line-height: 40px;}}.no-lyric {// margin: 200px 0;padding: 200px 0 0 0;width: 100%;text-align: center;span {font-size: 18px;text-align: center;}}
}.lyric-fade-enter,
.lyric-fade-leave-to {transform: translateX(30px);opacity: 0;
}.lyric-fade-enter-active,
.lyric-fade-leave-active {transition: all 0.3s ease;
}.tight-bottm{ //圆position: absolute;top:225px;  width: 400px; left:18%; height:400px; border-radius: 50%;transition: transform 0.7s linear;}.active {animation: none !important;// animation: spin 5s linear infinite;}// @keyframes spin {//   100% {//     transform: rotate(360deg);//   }// }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/188699.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

activiti命令模式与责任链模式

来源&#xff1a;activiti学习&#xff08;七&#xff09;——命令模式和职责链模式在activiti中的应用 文章目录 设计模式命令模式CommandHelloCommandByeCommand ReceiverInvokerClient 职责链模式AbstractHandlerConcreteHandlerAConcreateHandlerB Client activiti中很多ap…

跨域:利用CORS实现跨域访问

跨域知识点&#xff1a;跨域知识点 iframe实现跨域的四种方式&#xff1a;iframe实现跨域 JSONP和WebSocket实现跨域&#xff1a;jsonp和websocket实现跨域 目录 cors介绍 简介 两种请求 简单请求 基本流程 withCredentials 属性 非简单请求 预检请求 预检请求的回应 …

[100天算法】-面试题 04.01.节点间通路(day 72)

题目描述 节点间通路。给定有向图&#xff0c;设计一个算法&#xff0c;找出两个节点之间是否存在一条路径。示例1:输入&#xff1a;n 3, graph [[0, 1], [0, 2], [1, 2], [1, 2]], start 0, target 2 输出&#xff1a;true 示例2:输入&#xff1a;n 5, graph [[0, 1], …

【C语言】【数据结构】【环形链表判断是否带环并返回进环节点】有数学推导加图解

1.判断是否带环&#xff1a; 用快慢指针 slow指针一次走一步&#xff0c;fast指针一次走两步 当两个指针相遇时&#xff0c;链表带环&#xff1b;两个指针不能相遇时&#xff0c;当fast走到倒数第一个节点或为空时&#xff0c;跳出循环返回空指针。 那么slow指针一次走一步&a…

跨域:利用JSONP、WebSocket实现跨域访问

跨域基础知识点&#xff1a;跨域知识点 iframe实现跨域的四种方式&#xff1a;http://t.csdnimg.cn/emgFr 注&#xff1a;本篇中使用到的虚拟主机也是上面iframe中配置的 目录 JSONP跨域 JSONP介绍 跨域实验&#xff1a; WebSocket跨域 websocket介绍 跨域实验 JSONP跨域…

HBase学习笔记(1)—— 知识点总结

目录 HBase概述 HBase 基本架构 HBase安装部署启动 HBase Shell HBase数据读写流程 HBase 优化 HBase概述 HBase是以 hdfs 为数据存储的&#xff0c;一种分布式、非关系型的、可扩展的 NoSQL 数据库 关系型数据库和非关系型数据库的区别&#xff1a; 关系型数据库和非关…

拓展认知边界:如何给大语言模型添加额外的知识

Integrating Knowledge in Language Models P.s.这篇文章大部分内容来自Stanford CS224N这门课Integrating Knowledge in Language Models这一节&#x1f601; 为什么需要给语言模型添加额外的知识 1.语言模型会输出看似make sense但实际上不符合事实的内容 语言模型在生成…

【性能测试】服务端中间件docker常用命令解析整理(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、搜索 docker …

【计算机网络笔记】IP分片

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

Nginx(五)

负载均衡 官网文档 Using nginx as HTTP load balancer nginx中实现反向代理的方式 HTTP&#xff1a;通过nginx配置反向代理到后端服务器&#xff0c;nginx将接收到的HTTP请求转发给后端服务器。使用 proxy_pass 命令 HTTPS&#xff1a;通过nginx配置反向代理到后端服务器&…

如何使用 NFTScan NFT API 在 zkSync 网络上开发 Web3 应用

zkSync 是由 Matter Labs 创建的&#xff0c;是一个以用户为中心的 zk rollup 平台&#xff0c;它是以太坊的第 2 层扩展解决方案&#xff0c;使用 zk-rollups 作为扩展技术&#xff0c;与 optimistic rollups 一样&#xff0c;zk-rollups 将会汇总以太坊主网上的交易并将交易证…

debian/ubuntu/windows配置wiregurad内网服务器(包含掉线自启动)

文章目录 前言一、服务器配置安装wireguard软件生成私钥公钥配置服务器参数配置服务器sysctl参数启动、停止服务端 二、用户端配置安装wireguard软件生成私钥公钥配置客户端参数启动、停止客户端配置服务开机启动 三、服务器添加、删除客户四、配置掉线自启动配置掉线自启动脚本…

SPSS:卡方检验(交叉表)

第一步 打开SPSS软件&#xff0c;在工具栏中选中【打开-文件-数据】&#xff0c;然后选择一份要打开的数据表(如图所示)。 第二步 在工具栏中找到【分析-描述统计-交叉表】打开交叉表对话框(如图所示)。 第三步 接着将【行-列】相关变量放在对应对话框中(如图所示)。 第四步 在…

openGauss学习笔记-120 openGauss 数据库管理-设置密态等值查询-概述及使用gsql操作密态数据库

文章目录 openGauss学习笔记-120 openGauss 数据库管理-设置密态等值查询-概述及使用gsql操作密态数据库120.1 密态等值查询概述120.2 使用gsql操作密态数据库 openGauss学习笔记-120 openGauss 数据库管理-设置密态等值查询-概述及使用gsql操作密态数据库 120.1 密态等值查询…

C# Dictionary与List的用法区别与联系

C#是一门广泛应用于软件开发的编程语言&#xff0c;其中Dictionary和List是两种常用的集合类型。它们在存储和操作数据时有着不同的特点和用途。本文将详细探讨C# Dictionary和List的用法区别与联系&#xff0c;并通过代码示例进行对比&#xff0c;以帮助读者更好地选择适合自己…

RabbitMQ集群配置以及负载均衡配置

RabbitMQ集群配置以及负载均衡配置 环境配置集群配置安装rabbitmq启动rabbitmq开启远程登录添加用户并且授权用户添加数据存放目录和日志存放目录查看端口拷⻉erlang.cookie将mq-2、mq-3作为内存节点加⼊mq-1节点集群中查看集群状态添加一个新的队列 RabbitMq负载均衡配置-HAPr…

【LeetCode】挑战100天 Day09(热题+面试经典150题)

【LeetCode】挑战100天 Day09&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-112.1 题目2.2 题解 三、面试经典 150 题-113.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…

计算机网络——物理层-传输方式(串行传输、并行传输,同步传输、异步传输,单工、半双工和全双工通信)

目录 串行传输和并行传输 同步传输和异步传输 单工、半双工和全双工通信 串行传输和并行传输 串行传输是指数据是一个比特一个比特依次发送的。因此在发送端和接收端之间&#xff0c;只需要一条数据传输线路即可。 并行传输是指一次发送n个比特&#xff0c;而不是一个比特&…

FiRa标准——MAC实现(二)

在IEEE 802.15.4z标准中&#xff0c;最关键的就是引入了STS&#xff08;加扰时间戳序列&#xff09;&#xff0c;实现了安全测距&#xff0c;大大提高了测距应用的安全性能。在FiRa的实现中&#xff0c;其密钥派生功能是非常重要的一个部分&#xff0c;本文首先对FiRa MAC中加密…

减轻关键基础设施网络安全风险的 3 种方法

物理安全和网络安全之间存在相当大的重叠&#xff0c;特别是在保护关键基础设施方面。防止基础设施被篡改需要在物理安全方面进行大量投资&#xff0c;但任何连接到互联网的设备都代表着更广泛网络的潜在攻击点。 缺乏足够保护的设备可能会给这些对手在网络中提供立足点&#…