Question

我使用以下链接显示菜单

但我想只在上半圈显示它们。即使菜单计数发生变化，也只能使用上半圈。

Js代码

var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(2/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(5/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

我尝试通过更改值sin sin和cos但没有获得所需的输出

Answer 1

以下是快速演示：

＆＃13;

var isOn = false;

$('#menu-button').click(function() {
  if(isOn) {
    reset();
  } else {
    setPosition();
  }
});

function setPosition() {
  isOn = true;
  var links = $('#menu-button a');
  var radius = (links.length * links.width()) / 2;
  var degree = Math.PI / links.length, angle = degree / 2;
  
  links.each(function() {
    var x = Math.round(radius * Math.cos(angle));
    var y = Math.round(radius * Math.sin(angle));
    
    $(this).css({
      left: x + 'px',
      top: -y + 'px'
    });
    
  
    
    angle += degree;
  });
}

function reset() {
  $('#menu-button a').css({
    left: 0 + 'px',
    top: 0 + 'px'
  });
  
  isOn = false;
}

＆＃13;

body {
  margin: 0;
  background: #39D;
}



#menu-button:before {
  position: absolute;
  top: 0; left: 0;
  width: 50px;
  height: 50px;
  background: #dde;
  cursor: pointer;
  text-align: center;
  line-height: 50px;
  color: #444;
  border-radius:50%;
  content:"\f0c9";    font: normal normal normal 14px/1 FontAwesome;
  font-size:26px;
}

#menu-button {
  position: absolute;
  margin: auto;
  top: 150px; left: 0; right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  text-align: center;
}

#menu-button > a {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  
  -webkit-transition: top .5s, left .5s;
  -moz-transition: top .5s, left .5s;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  color: #EBEAE8;
  z-index: -1;
  border-radius:50%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Demo by http://creative-punch.net -->




<div id="menu-button" class="entypo-menu">
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
  <a href="" class="fa fa-home fa-2x"></a>
</div>

＆＃13;

Answer 2

我在您的示例中进行了此更改，仅在圆圈的顶部显示项目：

var items = document.querySelectorAll('.circle a');
var angle = 0;
var step = (Math.PI) / items.length;
for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(angle).toFixed(4)) + "%";

  items[i].style.top = (50 + 35* (-Math.abs(Math.sin(angle)))).toFixed(4) + "%";
  angle += step;
}

所以你只需要0到180度的角度。这就是我使用的原因（-Math.abs（Math.sin（angle）））

使用javascript在上半圈显示菜单

2 个答案: