简单MVP

Question

通常我不发布自己我通常会通过其他人的线程找到我需要的东西所以如果其中任何一个在错误的位置或格式不正确，我很抱歉。我以前从未这样做过。

所以情况如此：

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

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

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

（抱歉，显然我太新了，无法在我的帖子中使用图片：/）

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

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

如果用户选择的项目3 <{3}}

，则会旋转菜单项

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

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

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

我尝试过像Jquery的Animate（）方法，或使用JavaScript来影响每个元素css“top”＆amp; “左”属性，但它似乎没有工作，因为元素似乎不想移动。

我不知道尝试通过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主题中，所以我真的不知道这是不起作用的。

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

Answer 1

简单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>

Answer 2

这里的三角方法感觉不对。

这很像尝试在 binary code 中编程。这是可行的，但不一定是我们的程序应该是什么样子，如果我们想保持我们以后阅读代码的能力，并可能进一步修改其逻辑。

为了不必计算每个菜单元素的位置，我们必须将菜单的旋转与每个轴的旋转分开。< /p>

将它们分开后，它们的值可以放在 CSS 变量中，旋转它们所针对的元素（菜单或轴），同时将相应的按钮向后旋转相同的量。这样，按钮将始终直立，因为旋转会相互抵消。

这是原理的演示。注意CSS变量的使用，
使用 style="{ '--var-name': value }"。您还可以在运行时检查标记以读取当前旋转值：

new Vue({
  el: '#app',
  data: () => ({
    buttons: 3,
    useTransitions: true,
    isMenuOpen: true,
    rotation: -90
  }),
  computed: {
    axisRotations() {
      return Array.from({
        length: this.buttons
      }).map((_, i) => 360 * (this.buttons - i) / this.buttons)
    },
    menuRotation: {
      get() {
        return this.rotation
      },
      set(val) {
        this.rotation = isNaN(Number(val)) ? -90 : Number(val)
      }
    }
  },
  methods: {
    updateButtons(n) {
      if (this.buttons + n > 0) {
        this.buttons += n;
        this.isMenuOpen = true;
        this.menuRotation = -90;
      }
    },
    goToTop(axis) {
      let diff = this.degreesToTop(axis);
      diff = diff > 180
        ? diff - 360
        : diff <= -180
          ? diff + 360
          : diff;
      this.menuRotation = Math.round((this.menuRotation + diff) * 10) / 10;
    },
    degreesToTop(axis) {
      return (Math.round(this.axisRotations[axis - 1]) - this.menuRotation - 90) % 360;
    },
    isActive(axis) {
      return !(this.degreesToTop(axis));
    },
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    }
  }
})

.menu {
  width: 0;
  height: 0;
  top: 110px;
  left: 110px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(var(--menu-rotation));
  --menu-rotation: 0deg;
}

.menu .center {
  height: 54px;
  min-width: 54px;
  border-radius: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #eee;
  cursor: pointer;
  z-index: 2;
  transform: rotate(calc(-1 * var(--menu-rotation))) translateZ(0);
}

.menu .axis {
  position: absolute;
  width: 100px;
  left: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform-origin: 0 0;
  transform: rotate(var(--axis-rotation));
}

.animated .axis.axis {
  transition: all .54s cubic-bezier(.4, 0, .2, 1);
}

.menu .axis.closed {
  width: 27px;
  transform: rotate(calc(var(--axis-rotation) + 180deg));
  opacity: .1;
}

.axis.closed button,
.axis.active button {
  color: white;
  background-color: #f50;
}

.axis.active:not(.closed) {
  z-index: 1;
}

.axis button {
  background-color: white;
  cursor: pointer;
  width: 54px;
  height: 54px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 27px;
  border: 1px solid #eee;
  transform: rotate(calc(calc(-1 * var(--axis-rotation)) - var(--menu-rotation))) translateZ(0);
  outline: none;
}

.flexer {
  display: flex;
  height: 240px;
  padding-left: 220px;
}

.controls {
  flex-grow: 1
}

input {
  width: 100%;
}

label input {
  width: auto;
}

label {
  display: block;
  margin-top: 1rem;
  cursor: pointer;
}

.animated,
.animated .center,
.animated .axis,
.animated .axis>* {
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

body {
  background-color: #f8f8f8;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
  <div>
    <div class="flexer">
      <div class="menu"
           :class="{ animated: useTransitions }"
           :style="{'--menu-rotation': `${menuRotation}deg`}">
        <div class="center" @click="toggleMenu">menu</div>
        <div v-for="axis in buttons"
             class="axis"
             :class="{ closed: !isMenuOpen, active: isActive(axis) }"
             :style="{'--axis-rotation': `${360 * (axis - 1) / buttons}deg`}">
          <button v-text="axis" @click="goToTop(axis)" />
        </div>
      </div>
      <div class="controls">
        Menu rotation (<code v-text="`${menuRotation}deg`"></code>)
        <input type="range" min="-720" max="720" v-model="menuRotation">
        <button @click="updateButtons(1)">Add button</button>
        <button @click="updateButtons(-1)">Remove button</button>
        <button @click="toggleMenu">Toggle menu</button>
        <label>
          <input type="checkbox" v-model="useTransitions">Use transitions
        </label>
      </div>
    </div>
    <pre v-text="{ menuRotation, buttons, axisRotations }"></pre>
  </div>
</div>

如您所见，我从不计算按钮的位置。唯一使用的三角学是“一个圆有 360 度”。

上面的例子是在 Vue 中完成的，因为它是我碰巧喜欢的快速原型制作工具。如果您想要一个让项目置顶的普通解决方案，请参阅此问题的后续问题中的 my answer。

CSS / Javascript：如何制作具有多个状态的旋转圆形菜单？

2 个答案:

简单MVP

圆周运动