原生js实现摩天轮菜单栏-弧形菜单栏-圆形菜单栏

站长

2022年09月08日 18:42 · 阅读数 114

长话短说，废话少说

看效果

上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>

#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;
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2"></div>
  <div id="div3">
    <div class='content' id='test'></div>
  </div>
  <div id="div4">
    <div class='content' id='test1'></div>
  </div>
  <div id="div4"></div>
  <div id="div5"></div>
  <div id="div6"></div>
  <div id="div7"></div>
</div>
  
<hr/>
<button id='rotateButton'>旋转</button>

<script>
  let count = 0
  const btn = document.getElementById('rotateButton')
  const circle = document.getElementById('div1')
  const test = document.getElementById('test')
  const test1 = document.getElementById('test1')
  btn.addEventListener('click',function(){
    count = count + 45
    let testCount = -count-45
    let testCount1 = -count-90
    circle.style.transform = 'rotate('+count+'deg)'
    test.style.transform = 'rotate('+testCount+'deg)'
    test1.style.transform = 'rotate('+testCount1+'deg)'
  })
</script>
</body>
</html>

以上是个小demo，相信聪明的你把它跑起来之后稍加调试就能领会其中奥妙了

原生js实现摩天轮菜单栏-弧形菜单栏-圆形菜单栏

讲思路
摆位置。把静态的位置排列放好
公转。需要旋转的时候整体去旋转，此时各个item位置自然会发生偏移
自传。如上图，不作处理的话item的朝向永远是向着容器圆心的，所以需要item自转
在需要旋转时公转和自转同时进行
加个transition过渡
齐活

客官留步,难道你不喜欢老夫的封面吗？还不收藏加关注？关注过百放一波福利哟

原生js实现摩天轮菜单栏-弧形菜单栏-圆形菜单栏

转载自:https://segmentfault.com/a/1190000041622559