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


4、微信小程序演示

以上是关于web实现环形旋转圆形弧形querySelectorAllquerySelectorclientWidthsincosPI的主要内容,如果未能解决你的问题,请参考以下文章

tsc打印机模板怎么编辑环形文字

WPF特效-实现弧形旋转轮播图

js+css 圆形/环形 排列

Delphi: 圆形进度(环形进度)

[WPF] 使用三种方式实现弧形进度条

iOS~自带loading动画的登陆按钮