原生js实现摩天轮菜单栏-弧形菜单栏-圆形菜单栏
长话短说，废话少说
- 看效果
- 上代码
菜鸟教程(runoob.com) - 锐客网 #div1
{
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
border-radius:50%;
transition: transform 1s
}#div2
{width:50px;
height:30px;
position: absolute;
//top:15px;
left:calc(50% - 25px);
border: 1px solid black;
background-color: red;
transform: rotate(0deg);
transform-origin:25px 100px;
}#div3
{width:50px;
height:30px;
position: absolute;
//top:15px;
left:calc(50% - 25px);
//border: 1px solid black;
//background-color: red;
transform: rotate(45deg);
transform-origin:25px 100px;
}
#div3 .content {
width:100%;
height:100%;
border: 1px solid black;
background-color: gray;
transform: rotate(-45deg);
transition: transform 1s
}#div4
{width:50px;
height:30px;
position: absolute;
//top:15px;
left:calc(50% - 25px);
transform: rotate(90deg);
transform-origin:25px 100px;
}
#div4 .content {
width:100%;
height:100%;
border: 1px solid black;
background-color: pink;
transform: rotate(-90deg);
transition: transform 1s
}#div5
{width:50px;
height:30px;
position: absolute;
//top:15px;
left:calc(50% - 25px);
border: 1px solid black;
background-color: red;
transform: rotate(135deg);
transform-origin:25px 100px;
}#div6
{width:50px;
height:30px;
position: absolute;
//top:15px;
left:calc(50% - 25px);
border: 1px solid black;
background-color: red;
transform: rotate(180deg);
transform-origin:25px 100px;
}#div7
{width:50px;
height:30px;
position: absolute;
//top:15px;
left:calc(50% - 25px);
border: 1px solid black;
background-color: red;
transform: rotate(225deg);
transform-origin:25px 100px;
}
- 以上是个小demo，相信聪明的你把它跑起来之后稍加调试就能领会其中奥妙了
文章图片
- 讲思路
- 摆位置。把静态的位置排列放好
- 公转。需要旋转的时候整体去旋转，此时各个item位置自然会发生偏移
- 自传。如上图，不作处理的话item的朝向永远是向着容器圆心的，所以需要item自转
- 在需要旋转时公转和自转同时进行
- 加个transition过渡
- 齐活
文章图片
推荐阅读
- 更优雅地实现策略模式
- HarmonyOS|HarmonyOS USB DDK助你轻松实现USB驱动开发
- 云原生爱好者周刊（谁开发的软件，谁负责运维）
- JavaScript 引擎是如何实现 async/await 的
- Qt实现导出QTableWidget/QTableView数据
- Android如何实现动态滚动波形图(心电图)功能
- Vue|Vue 两个字段联合校验之修改密码功能的实现
- SpringCloud中使用Sentinel实现限流的实战
- Android|Android BLE 蓝牙开发之实现扫码枪基于BLESSED开发
- 企业如何实现在线客服功能（）