web实现环形旋转圆形弧形querySelectorAllquerySelectorclientWidthsincosPI
Posted 牧碼人
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web实现环形旋转圆形弧形querySelectorAllquerySelectorclientWidthsincosPI相关的知识,希望对你有一定的参考价值。
文章目录
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($xpx, $ypx)`;
init();
☺☺☺☺☺☺☺
定义名为
init
的函数,用来设置旋转图片的坐标。
通过querySelectorAll
获取一个图片类数组。
通过querySelector
和clientWidth
获取外层容器的宽度并除以2
得到半径。
定义itemLen
变量保存类数组长度。
通过类数组长度计算图片角度的平均值,并保存到pieceDeg
变量中。
使用for
循环计算出每张图片的x
和y
坐标,i * pieceDeg
得到角度值;(Math.PI / 180) * t
得到弧度值,因为编程中的sin
和cos
需要通过弧度才能计算出坐标值。
4、微信小程序演示
以上是关于web实现环形旋转圆形弧形querySelectorAllquerySelectorclientWidthsincosPI的主要内容,如果未能解决你的问题,请参考以下文章