通常,我通常不会通过其他线程找到我需要的内容,因此,如果其中任何一个放置在错误的位置或格式不正确,我将感到抱歉。我以前从未真正做到过。
这就是的情况:
我正在尝试重建我的网站,因此选择了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>