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

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="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获取一个图片类数组。
通过querySelectorclientWidth获取外层容器的宽度并除以2得到半径。
定义itemLen变量保存类数组长度。
通过类数组长度计算图片角度的平均值,并保存到pieceDeg变量中。
使用for循环计算出每张图片的xy坐标,i * pieceDeg得到角度值;(Math.PI / 180) * t得到弧度值,因为编程中的sincos需要通过弧度才能计算出坐标值。


4、微信小程序演示

2_2_0

http://www.lryc.cn/news/32634.html

相关文章:

  • PyCharm+Python+Selenium自动化测试动态验证码识别
  • git版本回退简单记录
  • QT入门Display Widgets之QLine、QLcdNumber、QTextBrowser
  • Spring学习笔记
  • 数据的标准化处理
  • 性能优化|记一次线上OOM问题处理
  • Vue动态粒子特效插件(背景线条吸附动画)
  • 【Java 类】002-类、属性、方法、代码块
  • Ubuntu Linux 编译安装的基本步骤
  • day59反刍笔记
  • 【阅读笔记】你不知道的Javascript--强制类型转换4
  • 华为OD机试真题Python实现【有效子字符串】真题+解题思路+代码(20222023)
  • 上门按摩预约APP源码-东郊到家源码(开发,PHP,平台搭建)
  • STL讲解——模拟实现vector
  • 各种经典排序算法介绍及实现源码
  • 历史大讲堂:这是真·图形化 苹果系统历史回顾(上)
  • 今天女神节,用python画个贺卡送给母亲吧
  • 【编程基础之Python】11、Python中的表达式
  • 华为OD机试真题Python实现【乱序整数序列两数之和绝对值最小】真题+解题思路+代码(20222023)
  • 字符串转换整数 (atoi)(python)
  • 洛谷 P1115 最大子段和
  • 【Linux】-- 权限和Shell运行原理
  • C++各类设计模式及实现详解
  • 【Linux】进程理解与学习(Ⅰ)
  • 认识代码之前,请先认识你自己 |《编程人生》
  • react学习笔记-5:react路由
  • [Python图像处理] 使用高通滤波器实现同态滤波
  • PyTorch深度学习:60分钟入门
  • C语言指针常见问题汇总
  • Coremail邮件系统全新上线存档邮箱功能