当前位置： 首页 > news >正文

web实现环形旋转、圆形、弧形、querySelectorAll、querySelector、clientWidth、sin、cos、PI

news 2025/9/14 13:24:00

文章目录

  • 1、HTML部分
  • 2、css部分
  • 3、JavaScript部分
  • 4、微信小程序演示

1、HTML部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>环形旋转</title><link rel="stylesheet" href="./rotateAround.css">
</head><body><div class="box"><div class="item"><img class="img" src="../img/X2_1_7ss.jpeg"></div><div class="item"><img class="img" src="../img/girl_a0.jpeg"></div><div class="item"><img class="img" src="../img/girl_g2.jpeg"></div><div class="item"><img class="img" src="../img/girl_a6.jpeg"></div><div class="item"><img class="img" src="../img/girl_d7.jpeg"></div></div><script src="./rotateAround.js"></script>
</body></html>

☺☺☺☺☺☺☺

使用定位实现环形布局。

2、css部分

body {height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.box {width: 360px;height: 360px;position: relative;display: flex;justify-content: center;align-items: center;animation: circularRotation linear infinite 20s;
}.item {width: 170px;height: 170px;position: absolute;
}.img {width: 100%;height: 100%;border-radius: 50%;animation: circularRotation linear infinite reverse 20s;
}@keyframes circularRotation {to {transform: rotate(360deg);}
}

☺☺☺☺☺☺☺

1、body的样式无关紧要，只是个人习惯。作用：让子代元素垂直水平居中在页面上。
2、box：设置容器宽高为360px；定位方式为relative（相对定位），让后续的absolute（绝对定位）相对于此容器进行定位；布局方式为flex（弹性布局），并且上下左右方向都为居中；设置动画：circularRotation(动画名称) linear(运动方式为匀速运动) infinite(重复次数为无限) 20s(时间)。
3、item：设置图片容器宽高为170px，并且使用absolute（绝对定位）。
4、img：图片大小继承父元素；形状为圆形；动画与box盒子类似，差异是旋转的方向为反方向，作用是保证图片永久为正向。属性为：reverse。
5、设置动画，动画名称为：circularRotation；让动画旋转360deg。

3、JavaScript部分

function init() {let elItem = document.querySelectorAll('.item'),radius = document.querySelector('.box').clientWidth / 2,itemLen = elItem.length,pieceDeg = 360 / itemLen;for (let i = 0; i < itemLen; i++) {let t = i * pieceDeg,x = undefined,y = undefined;t = (Math.PI / 180) * t;x = Math.sin(t) * radius;y = -Math.cos(t) * radius;elItem[i].style.transform = `translate(${x}px, ${y}px)`;}
}init();

☺☺☺☺☺☺☺

定义名为init的函数，用来设置旋转图片的坐标。
通过querySelectorAll获取一个图片类数组。
通过querySelector和clientWidth获取外层容器的宽度并除以2得到半径。
定义itemLen变量保存类数组长度。
通过类数组长度计算图片角度的平均值，并保存到pieceDeg变量中。
使用for循环计算出每张图片的x和y坐标，i * pieceDeg得到角度值；(Math.PI / 180) * t得到弧度值，因为编程中的sin和cos需要通过弧度才能计算出坐标值。

4、微信小程序演示

2_2_0

相关文章：

web实现环形旋转、圆形、弧形、querySelectorAll、querySelector、clientWidth、sin、cos、PI

文章目录1、HTML部分2、css部分3、JavaScript部分4、微信小程序演示1、HTML部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&l…...

编程日记 2023/5/4 20:48:33

PyCharm+Python+Selenium自动化测试动态验证码识别

driver.find_element(byBy.ID,valueUSERID).send_keys("admin")driver.find_element(byBy.ID,valuePASSWORD_VIEW).send_keys("123456")#ocr识别原理&#xff1a;先根据验证码的class dl_yzm定位到验证码图片&#xff0c;然后将验证码截图保存&#xff0c;…...

编程日记 2023/5/4 20:48:27

git版本回退简单记录

简单记录git版本回退的命令&#xff0c;参考的是这篇文章1 首先查看以前存档的版本&#xff1a; git log1. 知道要回退的版本和现在的版本差了多少代 回退上一代版本&#xff08;1个以前&#xff09; git reset –hard HEAD^回退上上一代版本&#xff08;2个以前&#xff0…...

编程日记 2023/5/4 20:48:19

QT入门Display Widgets之QLine、QLcdNumber、QTextBrowser

目录 一、QLine界面相关 1、布局介绍 2、界面基本属性 二、QLCDNumber的介绍 1、界面布局 2、定时器代码测试 三、QTextBrowser 此文为作者原创&#xff0c;创作不易&#xff0c;转载请标明出处&#xff01; 一、QLine界面相关 1、布局介绍 先看下界面中创建个Q…...

编程日记 2023/5/4 20:48:12

Spring学习笔记

目录1 IOC容器1.1 概念1.2 IOC的底层原理1.3 Spring中IOC容器的两种实现方式(两个接口)1.3.1 BeanFactory接口1.3.2 ApplicationContext接口1.3.3 为什么开发中使用ApplicationContext接口1.3.4 ApplicationContext接口的两个实现类1.4 IOC操作之bean管理1.4.0 bean是什么&…...

编程日记 2023/5/4 20:47:46

数据的标准化处理

假设各个指标之间的水平相差很大&#xff0c;此时直接使用原始指标进行分析时&#xff0c;数值较大的指标&#xff0c;在评价模型中的绝对作用就会显得较为突出和重要&#xff0c;而数值较小的指标&#xff0c;其作用则可能就会显得微不足道。 因此&#xff0c;为了统一比较的标…...

编程日记 2023/5/4 7:57:10

性能优化|记一次线上OOM问题处理

概述最近线上监控发现 OOM 涨幅较大&#xff0c;因此去尝试定位和修复这个问题&#xff0c;在修复了一些内存泄漏和大对象占用问题后, OOM 依旧未达到正常标准&#xff0c;在这些新上报的 hprof 文件中&#xff0c;发现几乎所有 case 中都有个叫 FinalizerReference 的对象&…...

编程日记 2023/5/4 20:47:23

Vue动态粒子特效插件（背景线条吸附动画）

目录 效果图&#xff1a; 一、安装&#xff1a; 二、引入 main.js 文件&#xff1a; 三、使用&#xff1a; 四、属性说明&#xff1a; 效果图&#xff1a; 一、安装&#xff1a; npm install vue-particles --save 二、引入 main.js 文件&#xff1a; import VueParticles…...

编程日记 2023/5/4 20:47:17

【Java 类】002-类、属性、方法、代码块

【Java 类】002-类、属性、方法、代码块 文章目录【Java 类】002-类、属性、方法、代码块一、类1、类与对象2、类的作用3、创建与使用类类结构创建类调用类运行结果4、Java 类的执行过程5、封装、继承、多态、抽象类、内部类、接口、枚举、记录、注解等二、属性1、概述2、类型3…...

编程日记 2023/5/4 20:47:08

Ubuntu Linux 编译安装的基本步骤

文章目录1 基本步骤若报错&#xff1a; No such file or directory2 解压 tar.bz2文件参考&#xff1a;1 基本步骤 解压&#xff1a; tar -zxvf file.tar.gz 进入解压后的文件夹&#xff1a; cd file 源码编译安装 ./configure # ./configmakesudo make install 若报错&…...

编程日记 2023/5/4 20:46:59

day59反刍笔记

1.本地环境安装vue后&#xff0c;没有vue.js文件&#xff0c;只有vue.cjs.js文件&#xff0c; 引用后也无法正常使用&#xff0c;看npm install vue后的文件夹中没有vue.js文件_找不到vue.js_一枝风的博客-CSDN博客 老哥的博客后得到启发&#xff0c;将原本的命令由&#xff1…...

编程日记 2023/5/4 20:46:52

【阅读笔记】你不知道的Javascript--强制类型转换4

目录强制类型转换基本概念JSONboolean强转归纳其他知识点被诟病的安全使用隐式强转法则抽象关系比较语法表达式变动强制类型转换 基本概念 类型转换发生在静态类型语言的编译阶段&#xff1b; 强制类型转换则发生在动态类型语言的运行时&#xff08;runtime&#xff09; JSON…...

编程日记 2023/5/4 4:07:27

华为OD机试真题Python实现【有效子字符串】真题+解题思路+代码（20222023）

有效子字符串 题目 输入两个字符串S和L，都只包含小写字母， S长度 <= 100,L长度 <= 500000， 判断S是否是L的有效子字符串， 判定规则：S中的每个字符在L中都能找到（可以不连续） 且S在L中字符的前后顺序与S中顺序要保持一致 例如： S="ace"是L="abcd…...

编程日记 2023/5/3 21:31:19

上门按摩预约APP源码-东郊到家源码(开发，PHP，平台搭建)

一、什么是上门按摩预约APP源码&#xff1f; 上门按摩预约APP源码是一款家政服务类型的APP&#xff0c;可以帮忙用户在家就能享受按摩的服务。APP源码分两端&#xff0c;一端是用户端&#xff0c;另外一端是技师端。采用的技术&#xff0c;前端是安卓IOS&#xff0c;后端是PHP&…...

编程日记 2023/5/4 20:46:45

STL讲解——模拟实现vector

STL讲解——模拟实现vector vector深度剖析 在STL源码中&#xff0c;发现vector定义的并不是 start、size、capacity&#xff0c;而是start、finish、end_of_storage. 这样就可以得到size()和capacity()。 sizefinish-start capacityend_of_storage-start 扩容可能是本地扩容也…...

编程日记 2023/5/4 20:46:31

各种经典排序算法介绍及实现源码

一，冒泡排序（Bubble Sort） 排序算法是程序员必须了解和熟悉的一类算法，排序算法有很多种，基础的如：冒泡、插入、选择、快速、归并、计数、基数和桶排序等。 冒泡排序只会操作相邻的两个数据。每次冒泡操作都会对相邻的两个元素进行比较，看是否满足大小关系要求，如果不…...

编程日记 2023/5/4 20:46:16

历史大讲堂：这是真·图形化 苹果系统历史回顾（上）

众所周知&#xff0c;米国有个非常牛掰的公司叫苹果&#xff0c;想必大家对这个logo不陌生吧。 目前已发布的苹果产品有iPhone、iPad、iPod等等&#xff0c;简直花样繁多&#xff0c;而且各种功能很好用&#xff0c;我的手机就是一部苹果iPhone X。 等一下&#xff0c;似乎扯远…...

编程日记 2023/5/4 20:46:06

今天女神节，用python画个贺卡送给母亲吧

今天女神节&#xff0c;你给女神妈妈准备了什么祝福呢&#xff1f;如果还没有&#xff0c;那么画个贺卡送给她吧&#xff0c;在你眼里&#xff0c;她是一个什么样的人呢&#xff1f; 是"可爱"&#xff0c;“温柔”&#xff0c;“美丽”&#xff0c;“漂亮”&#xf…...

编程日记 2023/5/4 20:46:00

【编程基础之Python】11、Python中的表达式

【编程基础之Python】11、Python中的表达式Python中的表达式表达式与运算符算术表达式赋值表达式比较表达式逻辑表达式位运算表达式总结Python中的表达式 在Python中&#xff0c;表达式是由操作数、运算符和函数调用等组成的语法结构&#xff0c;可以进行各种数学运算、逻辑判…...

编程日记 2023/5/4 20:45:50

华为OD机试真题Python实现【乱序整数序列两数之和绝对值最小】真题+解题思路+代码（20222023）

乱序整数序列两数之和绝对值最小 题目 给定一个随机的整数数组(可能存在正整数和负整数)nums, 请你在该数组中找出两个数，其和的绝对值(|nums[x]+nums[y]|)为最小值 并返回这两个数(按从小到大返回)以及绝对值。 每种输入只会对应一个答案。但是，数组中同一个元素不能使用两…...

编程日记 2023/5/4 20:45:46

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/9/14 10:15:00

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/9/9 22:39:04

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/9/9 14:50:29

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/9/13 11:37:54

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/9/3 15:40:48

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2025/9/10 7:39:21

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2025/9/7 8:49:05

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

编程新知 2025/9/9 6:56:01

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系&#xff0c;可直观判断线性相关、非线性相关或无相关关系&#xff0c;点的分布密…...

编程新知 2025/9/9 10:05:06

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/9/13 9:57:09