Vue<圆形旋转菜单栏效果>

效果图:

大家不一定非要制成菜单栏,可以看下人家的华丽效果😝,参考地址

https://travelshift.com/
大佬写的效果可比我的强多了,但是无从下手,所以就自己琢磨怎么写了,只能说效果勉强差不多 

可以通过更改data值和注释我标注的css样式处部分,就可以实现全圆的效果😄(全圆的时候会有个临界值问题,目前还没有解决,解决的话最后就不会有那种快速旋转一圈回到最开始的问题了~~~我是感觉不太舒服😭)


 

PI:360, //分布角度,默认为360deg

 

案例: 

<template><div class="overall"><div class="circle-box"><div class="circle" :style="`width:${circle_w}px;height:${circle_h}px`"><divclass="origin":style="`width:${box_w}px;height:${box_h}px;transform: rotate(${stard}deg);`"><div:style="`width:${box_w}px;height:${box_h}px;transform: rotate(${-stard}deg);`"class="img-box"v-for="(i,index) in boxNum":key="index"@click="Turn(index)"><div class="box"><div class="content">{{index+1}}</div></div></div></div></div></div></div>
</template><script>
export default {data() {return {circle_w: window.innerHeight, //圆盘的宽circle_h: window.innerHeight, //圆盘的高box_w: 350, //圆盘上覆盖的小圆点宽box_h: 350, //圆盘上覆盖的小圆点高PI:200, //分布角度,默认为360degstard: 90, //起始角度stard_s: null, //用来默认储存第一个初始值boxNum: 5, //圆盘上覆盖的小圆点个数activeIndex: 0, //默认下标};},created() {this.stard_s = this.stard;},mounted() {this.init();this.Turn(this.activeIndex);},methods: {//初始化小圆点,根据计算使其分布到对应位置init() {let box = document.querySelectorAll(".img-box");let avd = this.PI / box.length; //每一个 img-box 对应的角度let ahd = (avd * Math.PI) / 180; //每一个 img-box 对应的弧度let radius = this.circle_w / 2; //圆的半径for (let i = 0; i < box.length; i++) {box[i].style.left = Math.sin(ahd * i) * radius + "px";box[i].style.top = Math.cos(ahd * i) * radius + "px";}},//点击相对应小圆点,圆盘进行相对应角度的转动Turn(index) {let _this = this;let bx = document.querySelectorAll(".box");_this.stard = index * (_this.PI / _this.boxNum) + _this.stard_s;for (let i = 0; i < bx.length; i++) {if (i == index) {bx[i].classList.add("box-active");} else {bx[i].classList.remove("box-active");}}}}
};
</script><style lang="scss" scoped>
.overall {width: 100%;height: 100%;position: absolute;display: flex;align-items: center;justify-content: center;
}
.circle-box {position: absolute;//注释--------------------------此处显示全圆overflow: hidden;//注释----------------------此处显示全圆right: 0;//注释---------------------此处显示全圆.circle {transform: scale(0.9);width: 100%;height: 100%;border-radius: 50%;box-sizing: border-box;border: 1px solid #4d4c4c;position: relative;display: flex;justify-content: center;align-items: center;margin-left: 50%; //注释----------------此处显示全圆.origin {position: relative;transition: 0.5s; //控制圆盘的的旋转速率.img-box {user-select: none;position: absolute;top: 0;left: 0;transition: none !important;pointer-events: none;.box {pointer-events: all !important;width: 100%;height: 100%;transition: 0.3s;display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;border-radius: 50%;transform: scale(0.1);cursor: pointer;color: white;font-size: 40px;background: black;overflow: hidden;&:hover {transform: scale(0.3);}&:hover .content {opacity: 1;}.content {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;opacity: 0;}}.box-active {transition-delay: 0.5s;transform: scale(1) !important;.content {opacity: 1;}}}}}
}
</style>

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

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

相关文章

thinkadmin列表页工单状态多色显示,操作按钮条件判断

{field: gdtz, title: 工单状态, align: left, minWidth: 140,templet: function (d){if (d.gdtz==1){return "<span class=layui-badge layui-bg-cyan>" + 报装已提交 + "</span>" ;}else if (d.gdtz==2){return "

【开发用苹果电脑选择】MacBook下半部——无头骑士

开发用苹果电脑&#xff0c;16G是最低要求&#xff0c;IDEA开两个窗口内存基本满了&#xff0c;32G的苹果电脑都要2万 下面是我收集的2万苹果电脑的替代品 关键词&#xff1a;MacBook下半部下半套无头骑士 32G内存2T硬盘4300元&#xff0c;优点&#xff1a;白苹果、价格便宜

FPGA HDMI IP之DDC(本质I2C协议)通道学习

目的&#xff1a; 使用KingstVIS逻辑分析仪软件分析HDMI的DDC通道传输的SCDC数据&#xff08;遵循I2C协议&#xff09;&#xff0c;同时学习了解SCDC的寄存器与I2C通信协议。 部分英文缩写&#xff1a; HDMIHigh Definition Multi-media Interface高清多媒体接口DDCDisplay Dat…

一文讲述SASS简介和使用方法

一、什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具&#xff0c;它允许你使用变量、条件语句等&#xff0c;使开发更简单可维护。这里是官方文档。 二、基本语法 1&#xff09;变量 sass的变量名必须是一个$符号开头&#xff0c;后面紧跟变量名…

优雅的管理你的docker容器【Docker Swarm篇】

如果docker容器较多时&#xff0c;可以使用docker-compose管理自己的容器组&#xff0c;但是随着容器增多&#xff0c;docker-compose也会变的复杂起来&#xff0c;如果使用k8s&#xff0c;又会比较重&#xff0c;因为k8s集群的最小运行内存为2GB&#xff0c;所以在这中间&…

【Spring Boot 3】【@Scheduled】动态新增定时任务

【Spring Boot 3】【@Scheduled】动态新增定时任务 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技…

深度学习 | 基于 CPU 的 tensorflow + keras + python 版本对照及环境安装

Hi&#xff0c;大家好&#xff0c;我是源于花海。要让一个基于 CPU 的 tensorflow 和 keras 开发的深度学习模型正确运行起来&#xff0c;配置环境是个重要的问题&#xff0c;本文介绍了 tensorflow 和 keras 和对应的 python 版本以及安装环境的部分流程。 目录 一、tensorfl…

Redis核心技术与实战【学习笔记】 - 3.Redis服务高可靠

1.数据同步&#xff1a;主从库如何实现数据一致&#xff1f; 前面我们学习了 AOF 和 RDB&#xff0c;如果 Redis 发生了宕机&#xff0c;它们可以分别通过回放日志和重新读入 RDB 文件的方式恢复数据&#xff0c;从而保证尽量较少丢失数据&#xff0c;提升可靠性。 不过&…

B.修改数列

给定一个长度为 n 的正整数数列 a1,a2,…,an。 你可以对其中任意个&#xff08;可以是 0 个&#xff09;元素进行修改。 但是&#xff0c;每个元素最多只能修改一次&#xff0c;每次修改&#xff1a;要么令其加 1&#xff0c;要么令其减 1。 请问&#xff0c;至少需要修改多少个…

RTP工具改进(五)--使用qt

前篇 第四篇 RTP工具改进(四) - rtmp协议推送 前面使用的工具一直为mfc&#xff0c;今天将使用qt 来做界面&#xff0c;使用qt 来进行程序和协议的编写&#xff0c;qt部分目前还不包括rtp ps流和rtmp&#xff0c;暂时只有rtp 直接传输&#xff0c;关于rtmp协议和ps流协议&…

ubuntu和树莓派下vim插件管理

目录 管理方式选择vim手动方式管理插件延迟加载加载插件帮助文档 make管理vim插件1.安装make和git2.获取vim配置仓库3.准备工作4.安装相关软件5.安装并升级vim插件6.安装vim配置相关文件7.vim恢复到初始状态 管理方式选择 插件管理器vim-plug,Vundle等都依靠github,在国内由于…

在 VUE 项目中,使用 Axios 请求数据时,提示跨域,该怎么解决?

在 VUE 项目开发时&#xff0c;遇到个问题&#xff0c;正常设置使用 Axios 库请求数据时&#xff0c;报错提示跨域问题。 那在生产坏境下&#xff0c;该去怎么解决呢&#xff1f; 其可以通过以下几种方式去尝试解决&#xff1a; 1、设置允许跨域请求的响应头 1.1 在响应头中…

STM32实现软件IIC协议操作OLED显示屏(2)

时间记录&#xff1a;2024/1/27 一、OLED相关介绍 &#xff08;1&#xff09;显示分辨率128*64点阵 &#xff08;2&#xff09;IIC作为从机的地址0x78 &#xff08;3&#xff09;操作步骤&#xff1a;主机先发送IIC起始信号S&#xff0c;然后发送OLED的地址0x78&#xff0c;然…

机器学习的数据库积累........

https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/tf1_detection_zoo.md ​​​​​​​ 另一个database:&#xff08;网址:Object Detection Made Easy with TensorFlow Hub: Tutorial&#xff09; Object Detection Made Easy with Ten…

VR拍摄+制作

1.VR制作需要的图片宽高是2:1&#xff0c;需要360✖️180的图片&#xff0c;拍摄设备主要有两种&#xff1a; 1&#xff09;通过鱼眼相机拍摄&#xff0c;拍摄一组图片&#xff0c;然后通过PTGui来合成(拍摄复杂) 2&#xff09;全景相机&#xff0c;一键拍摄直接就能合成需要的…

【动态规划】【逆向思考】【C++算法】960. 删列造序 III

作者推荐 【动态规划】【map】【C算法】1289. 下降路径最小和 II 本文涉及知识点 动态规划汇总 LeetCode960. 删列造序 III 给定由 n 个小写字母字符串组成的数组 strs &#xff0c;其中每个字符串长度相等。 选取一个删除索引序列&#xff0c;对于 strs 中的每个字符串&a…

群晖nas 中的 VideoStation 关于豆瓣刮刮和TheMovieDb无法链接问题

网上各种教学文档很多&#xff0c;但是都有各种的坑&#xff0c;这偏文章仅对坑进行修正&#xff0c;具体可以参考其他文章&#xff0c;不同点以此文章为准。 第一部分&#xff0c;豆瓣刮刮 是 VideoStation的最佳搭配&#xff0c;汉字匹配&#xff0c;速度肯定是TheMovieDb无…

贾玲新片刚刚发出紧急声明,是什么情况。

♥ 为方便您进行讨论和分享&#xff0c;同时也为能带给您不一样的参与感。请您在阅读本文之前&#xff0c;点击一下“关注”&#xff0c;非常感谢您的支持&#xff01; 文 |猴哥聊娱乐 编 辑|徐 婷 校 对|侯欢庭 1月22日&#xff0c;一则“多位明星参演的电影涉影视投资诈骗…

【Java 设计模式】行为型之访问者模式

文章目录 1. 定义2. 应用场景3. 代码实现结语 访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;用于在不改变被访问元素的类的前提下定义对这些元素的新操作。访问者模式将数据结构与作用于结构上的操作解耦&#xff0c;使得操作集合可以灵…

[晓理紫]每日论文分享(有中文摘要,源码或项目地址)--强化学习、模仿学习、机器人、开放词汇

专属领域论文订阅 关注{晓理紫|小李子}&#xff0c;每日更新论文&#xff0c;如感兴趣&#xff0c;请转发给有需要的同学&#xff0c;谢谢支持 如果你感觉对你有所帮助&#xff0c;请关注我&#xff0c;每日准时为你推送最新论文。 分类: 大语言模型LLM视觉模型VLM扩散模型视觉…