CSS/Javascript:如何制作具有多个状态的旋转圆形菜单? [英] CSS/Javascript: How to make rotating circular menu with multiple states?
问题描述
通常我不会发布自己，我通常会通过其他人的线程找到我需要的东西，因此，如果其中任何一个放置在错误的位置或格式不正确，我将感到抱歉.我以前从未真正做到过.
Normally I don't post myself I usually find what I need via other's threads so I'm sorry if any of this is in the wrong place or improperly formatted. I've never done this before really.
这就是这种情况:
我正试图重建我的网站，我选择了WordPress的X主题.大多数情况下，它进展顺利，但是我几次想自定义并绕过X，事实证明这要困难一些.如果您知道在X中执行此操作的一种方法而无需进行自定义编码就可以完成此操作，那么我就耳熟能详.
I'm trying to rebuild my website and I opted to go with the X Theme for WordPress. Mostly it's going great, but the few times I've wanted to customize and go around X it's proved a bit more difficult. If you know of a way to do this within X that would accomplish this without doing custom coding, I'm all ears.
这就是我要做的事情:
我有一个圆形菜单的想法，该菜单会将其元素定位到顶部菜单是菜单中选定"元素的位置.因此在布局方面看起来像这样:
I had an idea for a circular menu that would position it's elements to where the top one is the "selected" element of the menu. So it would look something like this in terms of layout:
(对不起，显然我太新了，不能在帖子中使用图片了:/)
(Sorry, apparently I'm too new to use images in my posts :/)
基本状态 : http://i.stack.imgur.com/Gs2Nz.jpg
现在，当用户单击某个项目时，我希望它将新选择的项目旋转到上一个图像中"1"项目所在的顶部.就像这样:
Now when a user were to click on an item, I'd like it to rotate the new selected item up to the top where the "1" item was in the previous image. So it would be like this:
菜单项将被旋转 : http://i.stack.imgur.com/KWseu.jpg
其他一些需要注意的地方:我希望菜单项的文本或图像始终正常对齐，换句话说，我不希望元素文本上下颠倒或旋转后出现某种东西.
Some other things to note: I want the text or images of the menu items to always be normally aligned, in other words I don't want the elements text to be upside down or something after it rotates.
页面加载时我希望处理的元素的原始位置，而不是用CSS样式进行硬编码.主要是为了使它可以动态完成.
The original positioning of the elements I'd like to be handle when the page loads instead of hardcoded in the CSS style. Mainly just so that it can be done dynamically.
我打算对菜单做更多的事情，但这是我遇到的问题.
I'm planning to do more with the menu but it's THIS behavior that I'm having problems with.
我尝试了Jquery的Animate()方法之类的方法，或者使用JavaScript来影响CSS的每个元素顶部"和顶部"."left"属性，但由于元素似乎不想移动，它似乎无法正常工作.
I've tried things like Jquery's Animate() method, or using JavaScript to affect each elements css "top" & "left" properties, but it just doesn't seem to be working as the elements don't seem to want to move.
我不知道尝试通过X的定制器区域是否不是问题，因为有人告诉我添加JavaScript代码.或者这可能与我无法将JavaScript/JQuery代码与CSS正确连接，我有相当不错的编码经验，但是我对JQuery/CSS等相对较新.
I don't know that this isn't a problem with trying to go through X's customizer area or not as that's where I was told to add JavaScript code. Or this could have to do with me not connecting the JavaScript/JQuery code with the CSS properly, I have a decent amount of coding experience, but I'm relatively new to JQuery/CSS etc.
简短版本:我正在尝试找到一种方法，以在页面加载时将元素动态地定位在中心点附近.然后，当用户单击某个元素时，所有元素都围绕中心旋转，直到新选择的项目位于顶部.当用户选择其他项目时，此行为应继续.
So short version: I'm trying to find a way that when the page loads the elements are positioned dynamically around a center point. Then when a user clicks on an element all the elements rotate around the center, till the newly selected item is at the top. This behavior should continue as the user selects different items.
很抱歉，这篇文章很长，但我只是想尽我所能解释.任何见解或建议，将不胜感激！提前致谢！:)
Sorry for this being a long post, but I'm just trying to explain as best I can. Any insight or advice would be greatly appreciated! Thanks in advance! :)
更新:因此，我最终尝试了marzelin的答案，因为它看起来非常适合我想要的东西.但是，当我将其添加到X-Theme的Javascript区域并更新CSS时，元素并没有动.它们全部堆叠在中心，但是它们没有围绕中心点，并且单击它们似乎没有任何作用.好像CSS已经起作用了，但是Javascript部分却由于某种原因没有影响到元素?
UPDATE: So I ended up trying marzelin's answer as it looked perfect for what I wanted. However, when I added it into the X-Theme's Javascript area and updated my CSS the elements aren't moving. They all stack in the center, but they don't encircle the center point and clicking on them doesn't seem to be doing anything. Seems like the CSS has taken affect but the Javascript part is not affecting the elements for some reason?
这是我使用的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主题的编辑器之类的事情，因为似乎不知道其中的几个功能，因此我在调用它们之前将它们移到了那里，然后似乎找到了它们.像这样的小事.
I did change a few things, namely the CSS class names and such, but most of it's the same. I did a couple things like reorganizing as the editor for X Theme didn't seem to know what a few of the functions were so I moved them to before their calls and then it seemed to find them. So little things like that.
我还尝试将move函数更改为JQuery .click函数，以查看是否会触发任何操作，但似乎没有任何更改.
I also tried to change the move function to a JQuery .click function to see if that would trigger anything but it didn't seem to change anything.
虽然我以前使用过Javascript和一些JQuery，但我从未真正尝试过将其合并到WordPress主题中，因此我真的不知道这有什么用.
While I've worked with Javascript and some JQuery before, I've never really dealt with trying to incorporate it into a WordPress theme so I really don't know what this isn't working.
有人看到我在做什么错吗?因为我对为什么这行不通感到非常困惑.:/
Does anyone see anything I'm doing wrong? Cause I'm pretty perplexed as to why this won't work. :/
推荐答案
简单的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>这篇关于CSS/Javascript:如何制作具有多个状态的旋转圆形菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
