【发布时间】：2021-04-13 16:45:11
【问题描述】：
我通常不会发布自己的帖子，我通常会通过其他人的帖子找到我需要的内容，所以如果其中任何内容出现在错误的位置或格式不正确，我很抱歉。我以前从来没有这样做过。
情况是这样的：
我正在尝试重建我的网站，我选择使用 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 "top" 和 "left" 属性，但它似乎并没有工作，因为元素似乎没有想搬家。
我不知道尝试通过 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 部分目前的样子（不包括其他功能的其他代码，例如隐藏我的导航栏等）： p>
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 的编辑器似乎不知道其中的一些功能是什么，所以我在他们调用之前将它们移到了它们，然后它似乎找到了它们。像这样的小事。
我还尝试将 move 函数更改为 JQuery .click 函数，以查看这是否会触发任何内容，但似乎没有任何改变。
虽然我以前使用过 Javascript 和一些 JQuery，但我从来没有真正尝试过尝试将其合并到 WordPress 主题中，所以我真的不知道这不起作用。
有没有人看到我做错了什么？因为我很困惑为什么这不起作用。 ：/
【问题讨论】：
-
Codepen 是你的朋友——codepen.io/tag/circle%20menu
-
嗯，很有趣。这确实有一些非常接近的想法，我想我可以梳理并尝试将它们组合成我正在寻找的东西。不幸的是，我一直在尝试将不同的东西结合起来，但仍然无法让所有的部分发挥作用。不过，谢谢，这是一个很好的起点！ :)
标签： javascript jquery html css wordpress