通常,我通常不会通过其他线程找到我需要的内容,因此,如果其中任何一个放置在错误的位置或格式不正确,我将感到抱歉。我以前从未真正做到过。

这就是的情况:

我正在尝试重建我的网站,因此选择了WordPress的X主题。大多数情况下,它进展顺利,但是我几次想自定义并绕过X,事实证明这要困难一些。如果您知道在X中执行此操作的方法而无需进行自定义编码就可以完成此操作,那么,我将不胜枚举。

所以这是我想要做的:

我有一个圆形菜单的想法,该菜单将其元素定位到顶部的菜单中“选定”元素的位置。因此,就布局而言,它看起来像这样:

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

基本状态:http://i.stack.imgur.com/Gs2Nz.jpg

现在,当用户单击某个元素时,我希望它将新选择的元素旋转到上一个图像中“1”元素所在的顶部。因此它将是这样的:

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

其他注意事项:
我希望菜单项的文本或图像始终正常对齐,换句话说,我不希望元素文本上下颠倒或旋转后出现某种东西。

页面加载时我希望处理的元素的原始位置,而不是CSS样式中的硬编码。主要只是为了使其可以动态完成。

我打算对菜单做更多的事情,但这是我遇到的问题。

我已经尝试了诸如Jquery的Animate()方法之类的方法,或者使用JavaScript影响了CSS的每个元素的“顶部”和“左侧”属性,但是由于元素似乎不想移动,它似乎无法正常工作。

我不知道尝试通过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主题的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主题的编辑器之类的事情,因为似乎不知道其中的几个功能,因此我在调用它们之前将它们移到了那里,然后似乎找到了它们。像这样的小事。

我还尝试将move函数更改为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>

10-05 20:43
查看更多