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);// }// }
相关文章:
vue做的一个一点就转的转盘(音乐磁盘),点击停止时会在几秒内缓慢停止,再次点击按钮可以再次旋转,
先看效果: 代码:主要部分我会红线画出来 css:部分: 源码: vue部分: <template><div class"song-lyric"><div><div class"type"><div class"right">&l…...
Spring6(一):入门案例
文章目录 1. 概述1.1 Spring简介1.2 Spring 的狭义和广义1.3 Spring Framework特点1.4 Spring模块组成 2 入门2.1 构建模块2.2 程序开发2.2.1 引入依赖2.2.2 创建java类2.2.3 创建配置文件2.2.4 创建测试类测试 2.3 程序分析2.4 启用Log4j2日志框架2.4.1 引入Log4j2依赖2.4.2 加…...
Linux中报错no space device解决思路
1,df -h :查看所有文件下的磁盘使用情况。注意,查询的最后一栏属性就是分区所在的目录路径 2,进到具体的文件下,接着命令:du -sh * | grep G 搜索G以上的文本。 没搜到内容的话,使用命令du -sh…...
vue3使用element-plus
安装 # NPM $ npm install element-plus --save# Yarn $ yarn add element-plus# pnpm $ pnpm install element-plus 全局引入 main.js // main.ts import { createApp } from vue import ElementPlus from element-plus//引入ElementPlus所有组件 import element-plus/dis…...
高质量实时渲染笔记
文章目录 Real-time shadows1 自遮挡问题2 解决阴影detach问题?3 Aliasing4 近似积分5 percentage closer soft shadows(PCSS)percenta closer filtering(PCF)PCSS的思想 6 Variance Soft Shadow Mapping (VSSM)步骤Moment Shadow Mapping 7 Distance field shadow …...
云原生下GIS服务规划与设计
作者:lisong 目录 背景云原生环境下GIS服务的相关概念GIS服务在云原生环境下的规划调度策略GIS服务在云原生环境下的调度手段GIS服务在云原生环境下的服务规划调度实践 背景 作为云原生GIS系统管理人员,在面对新建的云GIS系统时,通常需要应对…...
VBA 宏For WPS(完整版)-供大家学习研究参考
VBE7.1安装方法: 适用于安装 WPS 2019 版本的 缺少 VBA 模块的 亲测可用,内含 VBA 7.1 安装顺序1、2、3、4按照顺序安装; 1.安装MSVCRTRedist\Release目录下32位的安装包,此安装包为运行时库 3.安装VBARedist\Release目录下32位的…...
【Linux】八、进程通信
进程通信的介绍 目的 数据传输:一个进程将它的数据发送给另一个进程; 资源共享:多个进程间共享资源; 通知事件:一个进程向另一个或一组进程发送消息,同时事件如,进程终止时要通知父进程…...
不同类型的软件企业该如何有效的管理好你的软件测试团队?
最近在网上发现一篇记录了2012年《[视频]作为测试经理如何有效管理好你的软件测试团队》的文字内容,感谢记录的人,我也保存一下。顺便将演讲中的PPT重点截图也放上来,一并保存了!。由于是现场速记,过度的口语化&#x…...
vue echart 立体柱状图 带阴影
根据一个博主代码改编而来 <template><div class"indexBox"><div id"chart"></div></div> </template><script setup> import * as echarts from "echarts"; import { onMounted } from "vue&…...
vscode远程linux安装codelldb
在windows上使用vscode通过ssh远程连接linux进行c调试时,在线安装codelldb-x86_64-linux.vsix扩展插件失败,原因是linux服务器上的网络问题,所以需要进行手动安装。 首先在windows上下载: codelldb-x86_64-linux.vsix;…...
【中间件篇-Redis缓存数据库08】Redis设计、实现、redisobject对象设计、多线程、缓存淘汰算法
Redis的设计、实现 数据结构和内部编码 type命令实际返回的就是当前键的数据结构类型,它们分别是:string(字符串)hash(哈希)、list(列表)、set(集合)、zset (有序集合),但这些只是Redis对外的数据结构。 实际上每种数据结构都有自己底层的…...
华为云优惠券介绍、领取入口及使用教程
华为云是华为的云服务品牌,致力于为用户提供一站式云计算基础设施服务。为了吸引用户,华为云经常推出各种优惠活动,其中就包括优惠券的发放,下面将为大家详细介绍华为云优惠券的作用、领取入口以及使用教程。 一、华为云优惠券介绍…...
OPTEE安全通告之CVE-2023-41325(Double free in shdr_verify_signature)
安全之安全(security)博客目录导读 目录 一、受影响版本 二、漏洞描述 三、问题触发 四、官方Patch修复...
第12章 关于 Micro SaaS 的结论
从时间和地点的自由到一种新鲜的独立感,开发 Micro SaaS 应用程序有很多好处。 获得 6 位数的订阅收入。辞掉我朝九晚五的令人丧命的工作。消除毫无意义的会议、办公室政治、混乱和救火。想工作就工作。随时随地使用我想要的任何技术工作。花更多时间陪伴家人。与我开发的应用…...
postman调用接口报{“detail“:“Method \“DELETE\“ not allowed.“}错误, 解决记录
项目是python代码开发, urls.py 路由中访问路径代码如下: urlpatterns [path(reportmanagement/<int:pk>/, views.ReportManagementDetail.as_view(), namereport-management-detail),] 对应view视图中代码如下: class ReportManagementDetail(GenericAPIView):"…...
基于单片机的线路差动保护系统设计
摘 要 随着我国微型电子技术和嵌入式系统的发展,目前行业内相对比较传统的线路差动保护系统无法满足客户的需求。为了改进传统线路差动保护系统在控制上得短板问题,在本次毕业设计中,将使用相对先进、快捷、智能的控制机制。该系统的控制大脑…...
vscode 快速打印console.log
第一步 输入这些 {// Print Selected Variabl 为自定义快捷键中需要使用的name,可以自行修改"Print Selected Variable": {"body": ["\nconsole.log("," %c $CLIPBOARD: ,"," background-color: #3756d4; padding:…...
drawio连接线的样式设置
drawio是一款强大的图表绘制软件,支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用,则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能,并实现了云端存储,以及在线共…...
【力扣题:循环队列】
文章目录 一.题目描述二. 思路解析三. 代码实现 一.题目描述 设计你的循环队列实现。 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。 循环队列的一个好…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门  UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案
JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停 1. 安全点(Safepoint)阻塞 现象:JVM暂停但无GC日志,日志显示No GCs detected。原因:JVM等待所有线程进入安全点(如…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
