通常我不发布自己我通常通过其他人的线程找到我需要的东西,所以如果有任何错误的地方或格式不正确,我很抱歉.我以前从未这样做过.

所以情况如下：

我正在尝试重建我的网站,我选择使用Word主题的X主题.它大部分时间都很棒,但是我想要定制并绕过X几次,事实证明它有点困难.如果您知道在X中执行此操作的方法可以在不进行自定义编码的情况下完成此操作,那么我会全神贯注.

所以这就是我要做的事情：

我有一个圆形菜单的想法,将它的元素定位到顶部菜单的“选定”元素.所以它在布局方面看起来像这样：

(对不起,显然我太新了,无法在帖子中使用图片：/)

基本国家：http://i.stack.imgur.com/Gs2Nz.jpg

现在,当用户点击某个项目时,我希望它将新选择的项目旋转到上一个图像中“1”项目的顶部.所以它会是这样的：

如果用户选择项目3：http://i.stack.imgur.com/KWseu.jpg,则旋转菜单项

其他一些注意事项：
我希望菜单项的文本或图像始终正常对齐,换句话说,我不希望元素文本颠倒或旋转后的某些内容.

我想在页面加载时处理的元素的原始位置,而不是CSS样式中的硬编码.主要是因为它可以动态完成.

我打算用菜单做更多的事情,但这是我遇到问题的行为.

我尝试过像Jquery的Animate()方法,或者使用JavaScript来影响每个元素css“top”& “左”属性,但它似乎没有工作,因为元素似乎不想移动.

我不知道尝试通过X的定制器区域这不是问题,因为我被告知要添加JavaScript代码.或者这可能与我没有正确连接JavaScript / JQuery代码和CSS有关,我有相当多的编码经验,但我对JQuery / CSS等相对较新.

这么简短的版本：
我试图找到一种方式,当页面加载时,元素围绕中心点动态定位.然后,当用户点击元素时,所有元素围绕中心旋转,直到新选择的项目位于顶部.当用户选择不同的项目时,此行为应继续.

很抱歉这是一篇很长的帖子,但我只想尽力解释.任何见解或建议将不胜感激！提前致谢！ 🙂

更新：
所以我最终尝试了marzelin的答案,因为它看起来非常适合我想要的东西.但是,当我将它添加到X-Theme的Javascript区域并更新我的CSS时,元素不会移动.它们都堆叠在中心,但是它们没有环绕中心点并且点击它们似乎没有做任何事情.好像CSS已经生效但Javascript部分由于某种原因不影响元素？

这是我使用的marzelin的答案(只是JavaScript部分)：

const buttons = Array.from(document.querySelectorAll('.button'))
const count = buttons.length
const increase = Math.PI * 2 / buttons.length
const radius = 150
let angle = 0

buttons.forEach((button, i) => {
  button.style.top = Math.sin(-Math.PI / 2 + i * increase) * radius + 'px'
  button.style.left = Math.cos(-Math.PI / 2 + i * increase) * radius + 'px'
  button.addEventListener('click', move)
})

function move(e) {
  const n = buttons.indexOf(e.target)
  const endAngle = (n % count) * increase
  turn()
  function turn() {
    if (Math.abs(endAngle - angle) > 1/8) {
      const sign = endAngle > angle ? 1 : -1
      angle = angle + sign/8
      setTimeout(turn, 20)
    } else {
      angle = endAngle
    }
    buttons.forEach((button, i) => {
      button.style.top = Math.sin(-Math.PI / 2 + i * increase - angle) * radius + 'px'
      button.style.left = Math.cos(-Math.PI / 2 + i * increase - angle) * radius + 'px'
    })
  }
}

这是我的X-Theme的javascript部分当前的样子(不包括其他函数的其他代码,比如隐藏我的导航栏等)：

jQuery(function($){

/* javascript or jquery code goes here */
  const stars = Array.from(document.querySelectorAll('.btnStars'));
  const count = stars.length;
  const increase = Math.PI * 2 / stars.length;
  const radius = 300;
  let angle = 0;

  stars.forEach((star, i) => {
    star.style.top = Math.sin(-Math.PI / 2 + i * increase) * radius + 'px';
    star.style.left = Math.cos(-Math.PI / 2 + i * increase) * radius + 'px';
    });

  $('.btnStar').click(function(e) {
    const n = stars.indexOf(e.target);
    const endAngle = (n % count) * increase;

    function turn() {
      if (Math.abs(endAngle - angle) > 1/8) {
        const sign = endAngle > angle ? 1 : -1;
        angle = angle + sign/8;
        setTimeout(turn, 20);
      } else {
        angle = endAngle;
      }

      stars.forEach((star, i) => {
        star.style.top = Math.sin(-Math.PI / 2 + i * increase - angle) * radius + 'px';
        star.style.left = Math.cos(-Math.PI / 2 + i * increase - angle) * radius + 'px';
      })
    }

    turn();
  });
});

我确实改变了一些东西,即CSS类名等等,但大多数情况都是一样的.我做了一些事情,比如重组,因为X Theme的编辑器似乎不知道一些功能是什么,所以我把它们移到他们的电话之前,然后它似乎找到了它们.那样的小事情.

我还尝试将移动函数更改为JQuery .click函数以查看是否会触发任何内容,但它似乎没有改变任何内容.

虽然我之前使用过Javascript和一些JQuery,但我从来没有真正尝试将其合并到WordPress主题中,所以我真的不知道这是不起作用的.

有没有人看到我做错了什么？因为我为什么这不起作用我感到非常困惑. ：/

最佳答案 简单的MVP

const buttons = Array.from(document.querySelectorAll('.button'))
const count = buttons.length
const increase = Math.PI * 2 / buttons.length
const radius = 150

buttons.forEach((button, i) => {
  button.style.top = Math.sin(-Math.PI / 2 + i * increase) * radius + 'px'
  button.style.left = Math.cos(-Math.PI / 2 + i * increase) * radius + 'px'
  button.addEventListener('click', move)
})

function move(e) {
  const n = buttons.indexOf(e.target)
  buttons.forEach((button, i) => {
    button.style.top = Math.sin(-Math.PI / 2 + (i - n % count) * increase) * radius + 'px'
    button.style.left = Math.cos(-Math.PI / 2 + (i - n % count) * increase) * radius + 'px'
  })
}

html,
body {
  height: 100%;
}
.menu {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: seagreen;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.center {
  width: 100px;
  height: 100px;
  background-color: goldenrod;
  border-radius: 100%;
  position: relative;
  line-height: 100px;
  text-align: center;
}
.button {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background-color: pink;
  line-height: 100px;
  text-align: center;
}

<div class="menu">
  <div class="center">Menu
    <div class="button">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">4</div>
    <div class="button">5</div>
  </div>
</div>

圆周运动

const buttons = Array.from(document.querySelectorAll('.button'))
const count = buttons.length
const increase = Math.PI * 2 / buttons.length
const radius = 150
let angle = 0

buttons.forEach((button, i) => {
  button.style.top = Math.sin(-Math.PI / 2 + i * increase) * radius + 'px'
  button.style.left = Math.cos(-Math.PI / 2 + i * increase) * radius + 'px'
  button.addEventListener('click', move)
})

function move(e) {
  const n = buttons.indexOf(e.target)
  const endAngle = (n % count) * increase
  turn()
  function turn() {
    if (Math.abs(endAngle - angle) > 1/8) {
      const sign = endAngle > angle ? 1 : -1
      angle = angle + sign/8
      setTimeout(turn, 20)
    } else {
      angle = endAngle
    }
    buttons.forEach((button, i) => {
      button.style.top = Math.sin(-Math.PI / 2 + i * increase - angle) * radius + 'px'
      button.style.left = Math.cos(-Math.PI / 2 + i * increase - angle) * radius + 'px'
    })
  }
}

html, body {
  height: 100%;
}

.menu {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: seagreen;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 100px;
  text-align: center;
}

.center {
  width: 100px;
  height: 100px;
  background-color: goldenrod;
  border-radius: 100%;
  position: relative;
}

.button {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: pink;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
}

<div class="menu">
  <div class="center">menu
    <div class="button">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">4</div>
    <div class="button">5</div>
  </div>
</div>