CSS 多按钮根据半圆弧度排列

需求

多个按钮根据弧度,延边均匀排列。

实现

HTML

  • 分两级;
  • 第一级,外层定义按钮的 compose-container 宽度;
  • 第二级,按钮集合,使用方法 styleBtn(index),根据索引计算;
<div class="compose-container flex-style-01"><div class="btn" v-for="(item, index) in btnNum" :key="index" :style="styleBtn(index)">{{ index }}</div>
</div>

CSS

  • compose-container:容器样式,使用 flex 布局,且设置 width
  • btn:按钮样式,无需设置 display
.compose-container {display: flex;width: 600px;height: 80px;margin: 50px 0;background: #409eff;.btn {width: 50px;height: 50px;line-height: 50px;background: #aec0d1;border-radius: 50%;text-align: center;vertical-align: middle;}
}

JavaScript

  • 如下方法是计算按钮 translateY 值;
  • 代码第 2 行,传参是按钮的索引值,从 0 开始;
  • 代码第 4 行,按钮的总个数;
  • 代码第 6 行,按钮垂直高度间隔,单位 px
  • 代码第 8 行,整体抬高,也可不设置;
  • 代码第 12 - 27 行,区分偶数和奇数,中心点计算;
  • 代码第 29 行,设置属性 translateY
// 按钮弧度高度
function styleBtn(index) {// 总个数const totalNum = 8;// 间隔高度,单位 pxconst gap = 8;// 整体抬高const raiseHeight = 28;let translateY = ''if(totalNum%2 === 0) { // 偶数const centerIdx = totalNum / 2;const n = centerIdx - index;// > 0 左侧,<= 右侧translateY = (n > 0) ? n * gap : (Math.abs(n)+1) * gap;}else { // 奇数const centerIdx = Math.floor(totalNum / 2);const n = centerIdx - index;if(centerIdx === index) {// 中心点translateY = gap;}else {translateY = (Math.abs(n)+1) * gap;}}return { transform: `translateY(${(translateY - raiseHeight)}px)` }
}

效果

偶数

  • 按钮个数为偶数,中间两个按钮在同一条水平线上;
  • 样式一,justify-content: center,根据按钮的 margin 属性设置间隔;
  • 样式二:justify-content: space-between,两端对齐,按钮之间的空间平均分配;
  • 样式三:justify-content: space-around,按钮两侧空间相等,但首尾按钮与容器边缘的空间是按钮之间空间的一半;
  • 样式四:justify-content: space-evenly,所有间距(包括首尾按钮与容器边缘的间距)都相等;

在这里插入图片描述

奇数

  • 按钮个数为奇数,中间一个按钮最高,其它左右两侧在同一条水平线上;
  • justify-content 设置同上;

在这里插入图片描述

完整代码

<template><div><h4>样式一:justify-content: center, 且设置btn margin </h4><div class="compose-container flex-style-01"><div class="btn" v-for="(item, index) in btnNum" :key="index" :style="styleBtn(index)">{{ index }}</div></div><h4>样式二:justify-content: space-between</h4><div class="compose-container flex-style-02"><div class="btn" v-for="(item, index) in btnNum" :key="index" :style="styleBtn(index)">{{ index }}</div></div><h4>样式三:justify-content: space-around</h4><div class="compose-container flex-style-03"><div class="btn" v-for="(item, index) in btnNum" :key="index" :style="styleBtn(index)">{{ index }}</div></div><h4>样式四:justify-content: space-evenly</h4><div class="compose-container flex-style-04"><div class="btn" v-for="(item, index) in btnNum" :key="index" :style="styleBtn(index)">{{ index }}</div></div></div>
</template><script setup>
import { ref } from 'vue';const btnNum = ref(7);// 按钮弧度高度
function styleBtn(index) {// 总个数const totalNum = btnNum.value;// 间隔高度,单位 pxconst gap = 8;// 整体抬高const raiseHeight = 28;let translateY = ''if(totalNum%2 === 0) { // 偶数const centerIdx = totalNum / 2;const n = centerIdx - index;// > 0 左侧,<= 右侧translateY = (n > 0) ? n * gap : (Math.abs(n)+1) * gap;}else { // 奇数const centerIdx = Math.floor(totalNum / 2);const n = centerIdx - index;if(centerIdx === index) {// 中心点translateY = gap;}else {translateY = (Math.abs(n)+1) * gap;}}return { transform: `translateY(${(translateY - raiseHeight)}px)` }
}
</script><style lang="scss" scoped>
.compose-container {display: flex;width: 600px;height: 80px;margin: 50px 0;background: #409eff;.btn {width: 50px;height: 50px;line-height: 50px;background: #aec0d1;border-radius: 50%;text-align: center;vertical-align: middle;}
}
.flex-style-01 {justify-content: center;.btn {margin: 0 6px;}
}
.flex-style-02 {justify-content: space-between;
}
.flex-style-03 {justify-content: space-around;
}
.flex-style-04 {justify-content: space-evenly;
}
</style>

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

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

相关文章

青岛实训 8月9号 day25

mysql下载路径&#xff1a; MySQL :: MySQL Community Downloads [root2 ~]# vim py001.pya3b4print(ab)print(a**2b**2)[root2 ~]# python py001.py 725[root2 ~]# python3>>> import random>>> random<module random from /usr/lib64/python3.6/random…

vue3、uniapp-vue3模块自动导入

没有使用插件 使用插件,模块自动导入 安装: npm i -D unplugin-auto-importvite.config.js (uniapp没有此文件,在项目根目录下创建) import { defineConfig } from "vite"; import uni from "dcloudio/vite-plugin-uni"; import AutoImport from &qu…

Mask-Rcnn

一 、FPN层 FPN层的基本作用 基本网络架构 基本思想 将多个阶段特征图融合在一起&#xff0c;这就相当于既有了高层的语义特征&#xff0c;也有了低层的轮廓特征 二、RPN层 三、ROI Align层

Java环境安装与配置——eclipse

目录 一、下载安装jdk 二、环境配置 三、下载安装eclipse软件 四、Java命名规则 一、下载安装jdk 1.下载页面 https://www.oracle.com/java/technologies/javase-jdk13-downloads.html 2.下载到本地安装 3.鼠标双击打开 4.选择安装路径并记住位置。建议&#xff1a;最好不…

SQL Zoo 8.Using Null

以下数据均来自SQL Zoo 1.List the teachers who have NULL for their department.&#xff08;列出所属部门为NULL的教师&#xff09; select name from teacher where dept is null 2.Note the INNER JOIN misses the teachers with no department and the departments wit…

JVM -- 类加载器

类加载器(ClassLoader)是Java虚拟机提供给应用程序去实现访问接口和类字节码数据的技术。类加载器只负责加载过程中的字节码获取并加载到内存的这一过程。 一、 类加载器的分类 类加载器的详细信息可以使用Arthas通过classloader命令查看&#xff1a; 1.启动类加载器(Boots…

代码随想录打卡第五十三天

代码随想录–图论部分 day 53 图论第三天 文章目录 代码随想录--图论部分一、卡码网101--孤岛的总面积二、卡码网102--沉没孤岛三、卡码网103--水流问题四、卡码网104--建造最大岛屿 一、卡码网101–孤岛的总面积 代码随想录题目链接&#xff1a;代码随想录 给定一个由 1&…

绘图仪 -- Web前端开发和Canvas绘图

Canvas绘图介绍 Canvas绘图是HTML5中引入的一个非常强大的特性&#xff0c;它允许开发者使用JavaScript在网页上绘制图形、图表、动画等。<canvas>元素提供了一个通过JavaScript和Canvas API进行绘图的环境。 创建绘图仪对象 // 定义一个名为 XYPlotter 的函数&#x…

Mapboxgl 实现弧线功能

更多精彩内容尽在 dt.sim3d.cn &#xff0c;关注公众号【sky的数孪技术】&#xff0c;技术交流、源码下载请添加VX&#xff1a;digital_twin123 代码如下&#xff1a; const mapCenter [-0.5, 51.8];// please use your own token! const map new mapboxgl.Map({container: …

怎样才算精通 Excel?

最强AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频百万播放量https://aitools.jurilu.com/ 高赞回答很系统&#xff0c;但普通人这么学&#xff0c;没等精通先学废了&#xff01; 4年前&#xff0c;我为了学数据分析&#…

iOS Object-C 创建类别(Category) 与使用

有时候使用系统给出类或者第三方的类,但是呢它们自带的属性和方法又太少,不够我们的业务使用,这时候就需要给“系统的类或者第三方类”创建一个类别(Category),把自己的想添加的属性和方法写进来. Category模式用于向已经存在的类添加方法从而达到扩展已有类的目的 一:创建Ca…

继承(二)

隐藏/重定义&#xff1a;子类和父类有同名的成员&#xff0c;子类成员隐藏了父类的成员。 重载&#xff1a;同一个作用域&#xff0c;重载了参数。 &#xff08;在实际中最好不要定义同名函数&#xff09; 子类对象不能初始化父类对象&#xff0c;用父类成员初始化子类成员。…

开关电源之结构分析

如有技术问题及技术需求请加作者微信! 开关电源之结构分析 1、开关电源的结构 常用开关电源,主要是为电子设备提供直流电源供电。电子设备所需要的直流电压,范围一般都在几伏到十几伏,而交流市电电源供给的电压为220V(110V),频率为50Hz(60Hz)。开关电源的作用就是把一…

【Unity】线性代数基础:矩阵、矩阵乘法、转置矩阵、逆矩阵、正交矩阵等

文章目录 矩阵&#xff08;Matrix&#xff09;矩阵能干啥&#xff1f;矩阵基本运算矩阵加减法矩阵和标量的乘法矩阵和矩阵的乘法矩阵的转置矩阵相等 特殊的矩阵方块矩阵对称矩阵对角元素&#xff08;Diagonal Elements&#xff09;对角矩阵&#xff08;Diagonal Matrix&#xf…

C语言-函数

一、函数的概念 其实在C语⾔也引⼊函数&#xff08;function&#xff09;的概念&#xff0c;有些翻译为&#xff1a;⼦程序&#xff0c;⼦程序这种翻译更加准确⼀些。C语⾔中的函数就是⼀个完成某项特定的任务的⼀⼩段代码。这段代码是有特殊的写法和调⽤⽅法的。C语⾔的程序其…

hs_err_pid.log分析

hs_err_pid.log 文件是 Java 虚拟机&#xff08;JVM&#xff09;在遇到致命错误&#xff08;如崩溃或内部错误&#xff09;时生成的错误日志文件。这个文件包含了关于崩溃的详细信息&#xff0c;可以帮助开发者或系统管理员诊断和解决问题。 hs_err_pid.log文件位置和命名 文…

基于springboot3实现单点登录(二):认证服务端搭建

前言 上文我们介绍了oauth2.0的相关理论和流程&#xff0c;本文我们继续实现。 Oauth2协议中有个很重要的概念&#xff0c;叫做”端点“&#xff0c; 以下整理了一些常用的端点及其参考访问路径及使用场景的信息&#xff0c;供参考。 这些端点在oauth2.0协议的整个生命周期…

python自动化笔记:操作mysql数据库

操作mysql数据库常见方法 1、第三方库&#xff1a;pymysql1.1、安装pymysql1.2、连接数据库1.3、连接指定数据库1.4 创建数据库、创建表1.5、表中插入数据1.6、批量插入数据1.7、获取查询结果数据1.8、防sql注入&#xff0c;sql语句中一般用占位符传值 2、标准库 &#xff1a;m…

【《Kafka 入门指南:从零基础到精通》】

前言&#xff1a; &#x1f49e;&#x1f49e;大家好&#xff0c;我是书生♡&#xff0c;本阶段和大家一起分享和探索KAFKA&#xff0c;本篇文章主要讲述了&#xff1a;消息队列的基础知识&#xff0c;KAFKA消息队列等等。欢迎大家一起探索讨论&#xff01;&#xff01;&#x…

rocketMQ5.0事务消息实战

事务消息逻辑 docker部署容器&#xff0c;并且创建消息 dd首先我们来docker 部署rocketMQ与rocketMQDashBoard docker ps查看rocketMQ 容器名称 docker ps 进入容器内部 docker exec -it rmqnamesrv /bin/bash 创建事务消息 MeessageType: TRANSACTION sh mqadmin upda…