Question

我创建了一个wheelnav.js导航菜单。我需要将菜单的旋转固定为仅顺时针方向。目前，旋转是顺时针和反时钟。我查看了wheelnav.js的文档，但似乎找不到任何设置该属性的选项。需要帮助才能将旋转固定到顺时针方向。

目前的工作：http://www.betatesting87.com/wheel/

Answer 1

需要介绍rotateRound属性

＆＃13;

var piemenu = new wheelnav('piemenu');
piemenu.clockwise = false; //for counter clockwise get it true
piemenu.rotateRound = true;

piemenu.wheelRadius = piemenu.wheelRadius * 1.09;
piemenu.animatetime = 1100;
piemenu.animateeffect = 'linear';
piemenu.selectedPercent = 1.1;
piemenu.createWheel();

＆＃13;

#piemenu>svg {
  width: 90%;
  height: 90%;
}

#piemenu {
  height: 700px;
  width: 700px;
  margin: 30px auto;
}

@media (max-width: 400px) {
  #piemenu {
    height: 300px;
    width: 300px;
  }
}

[class|=wheelnav-piemenu-slice-basic-0] {
  fill: #56C5D0;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-selected-0] {
  fill: #876FB2;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-hover-0] {
  fill: #56C5D0;
  stroke: none;
  fill-opacity: 0.77;
  cursor: pointer;
}

[class|=wheelnav-piemenu-slice-basic-1],
[class|=wheelnav-piemenu-slice-basic-3],
[class|=wheelnav-piemenu-slice-basic-5],
[class|=wheelnav-piemenu-slice-basic-7],
[class|=wheelnav-piemenu-slice-basic-9] {
  fill: #336C8C;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-selected-1],
[class|=wheelnav-piemenu-slice-selected-3],
[class|=wheelnav-piemenu-slice-selected-5],
[class|=wheelnav-piemenu-slice-selected-7],
[class|=wheelnav-piemenu-slice-selected-9] {
  fill: #876FB2;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-hover-1],
[class|=wheelnav-piemenu-slice-hover-3],
[class|=wheelnav-piemenu-slice-hover-5],
[class|=wheelnav-piemenu-slice-hover-7],
[class|=wheelnav-piemenu-slice-hover-9] {
  fill: #336C8C;
  stroke: none;
  fill-opacity: 0.77;
  cursor: pointer;
}

[class|=wheelnav-piemenu-slice-basic-2],
[class|=wheelnav-piemenu-slice-basic-4],
[class|=wheelnav-piemenu-slice-basic-6],
[class|=wheelnav-piemenu-slice-basic-8],
[class|=wheelnav-piemenu-slice-basic-10] {
  fill: #56C5D0;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-selected-2],
[class|=wheelnav-piemenu-slice-selected-4],
[class|=wheelnav-piemenu-slice-selected-6],
[class|=wheelnav-piemenu-slice-selected-8],
[class|=wheelnav-piemenu-slice-selected-10] {
  fill: #876FB2;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-hover-2],
[class|=wheelnav-piemenu-slice-hover-4],
[class|=wheelnav-piemenu-slice-hover-6],
[class|=wheelnav-piemenu-slice-hover-8],
[class|=wheelnav-piemenu-slice-hover-10] {
  fill: #56C5D0;
  stroke: none;
  fill-opacity: 0.77;
  cursor: pointer;
}

[class|=wheelnav-piemenu-title-basic] {
  fill: #333;
  stroke: none;
}

[class|=wheelnav-piemenu-title-selected] {
  fill: #fff;
  stroke: none;
}

[class|=wheelnav-piemenu-title-hover] {
  fill: #222;
  stroke: none;
  cursor: pointer;
}

[class|=wheelnav-piemenu-title]>tspan {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  fill: #ffffff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/wheelnav.min.js"></script>
<div id='piemenu' data-wheelnav data-wheelnav-slicepath='DonutSlice' data-wheelnav-colors='#E34C26,#F06529' data-wheelnav-navangle='315' data-wheelnav-cssmode data-wheelnav-init>
  <div data-wheelnav-navitemtext='Apply'></div>
  <div data-wheelnav-navitemtext='Survey Preparation'></div>
  <div data-wheelnav-navitemtext='Technical Review'></div>
  <div data-wheelnav-navitemtext='Final Submission of SAT'></div>
  <div data-wheelnav-navitemtext='Survey'></div>
  <div data-wheelnav-navitemtext='Factual Accuracy Review'></div>
  <div data-wheelnav-navitemtext='Validation Review'></div>
  <div data-wheelnav-navitemtext='Award Decision'></div>
  <div data-wheelnav-navitemtext='Continuous Assessment'></div>
  <div data-wheelnav-navitemtext='Re-Accreditation'></div>
</div>

＆＃13;

Wheelnav.js甜甜圈菜单只能顺时针旋转

1 个答案: