如何使用javascript或jquery旋转li？

对不起，语法错误。我不能正确地问这个问题，所以我用图像来理解我的问题。我有三个

LI

在圆圈中，我想做一个能够

• 单击

  li

  将旋转并停止在橙色框上，并更改其他两个位置
• 另外两个

  li

  也将起到类似的作用

注: 李基本上是在展示它的divonclick。请帮帮我

这是我的

CSS HTML

一个技能框1


两个技能框2


三技能框3

这是用于显示li框的JavaScript

<script>  
    $("li").click(function(){   
        $("li div").not($("div",$(this))).hide();   
        $("div",$(this)).fadeToggle("fast");
         }) 

</script>

$（“li”）。单击（函数（）{
$（$lidiv”）.not（$（$div），$（this））.hide（）；
$（“div”，$（this））.fadeToggle（“fast”）；
}) 

基本上，您想要构建的是一个轮盘赌

一些简单的谷歌搜索在这个网站上找到了我：

您需要一个htlm5画布元素。如果您需要支持某些旧版本的IE，这将不起作用。这里的热链接有很多代码，所以我会推荐您访问该网站。如果它不可用。我相信你会有所收获的

编辑：HTML代码：

<input type="button" value="spin" style="float:left;" />
<canvas id="canvas" width="500" height="500"></canvas>

用于生成控制盘的javascript：

var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
             "#2E2C75", "#673A7E", "#CC0071", "#F80120",
             "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["Wendy's", "McDonalds", "Chick-fil-a", "Five Guys",
                   "Gold Star", "La Mexicana", "Chipotle", "Tazza Mia",
                   "Panera", "Just Crepes", "Arby's", "Indian"];

var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;

var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var ctx;

function drawRouletteWheel() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var outsideRadius = 200;
    var textRadius = 160;
    var insideRadius = 125;

    ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,500,500);


    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;

    ctx.font = 'bold 12px Helvetica, Arial';

    for(var i = 0; i < 12; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = colors[i];

      ctx.beginPath();
      ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
      ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();

      ctx.save();
      ctx.shadowOffsetX = -1;
      ctx.shadowOffsetY = -1;
      ctx.shadowBlur    = 0;
      ctx.shadowColor   = "rgb(220,220,220)";
      ctx.fillStyle = "black";
      ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 
                    250 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = restaraunts[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      ctx.restore();
    } 

    //Arrow
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
    ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.fill();
  }
}

function spin() {
  spinAngleStart = Math.random() * 10 + 10;
  spinTime = 0;
  spinTimeTotal = Math.random() * 3 + 4 * 1000;
  rotateWheel();
}

function rotateWheel() {
  spinTime += 30;
  if(spinTime >= spinTimeTotal) {
    stopRotateWheel();
    return;
  }
  var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
  startAngle += (spinAngle * Math.PI / 180);
  drawRouletteWheel();
  spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
  clearTimeout(spinTimeout);
  var degrees = startAngle * 180 / Math.PI + 90;
  var arcd = arc * 180 / Math.PI;
  var index = Math.floor((360 - degrees % 360) / arcd);
  ctx.save();
  ctx.font = 'bold 30px Helvetica, Arial';
  var text = restaraunts[index]
  ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
  ctx.restore();
}

function easeOut(t, b, c, d) {
  var ts = (t/=d)*t;
  var tc = ts*t;
  return b+c*(tc + -3*ts + 3*t);
}

drawRouletteWheel();

var colors=[“B8D430”、“3AB745”、“029990”、“3501CB”，
“2E2C75”、“673A7E”、“CC0071”、“F80120”，
“F35B20”、“FB9A00”、“FFCC00”、“FEF200”]；
var Restarunts=[“Wendy's”、“McDonalds”、“Chick-fil-a”、“Five Guys”，
“金星”、“墨西哥拉”、“奇波特”、“塔扎米亚”，
“Panera”、“Just Crepes”、“Arby's”、“Indian”]；
var-startAngle=0；
var arc=Math.PI/6；
var spinTimeout=null；
var spinArcStart=10；
var spinTime=0；
var spinTimeTotal=0；
var-ctx；
函数DrawRouletWheel（）{
var canvas=document.getElementById（“canvas”）；
if（canvas.getContext）{
var=200；
var textRadius=160；
var insideRadius=125；
ctx=canvas.getContext（“2d”）；
ctx.clearRect（0,0500）；
ctx.strokeStyle=“黑色”；
ctx.lineWidth=2；
ctx.font='bold 12px Helvetica，Arial'；
对于（变量i=0；i<12；i++）{
var角度=星形缠结+i*弧；
ctx.fillStyle=颜色[i]；
ctx.beginPath（）；
ctx.弧（250，250，半径，角度，角度+弧，假）；
ctx.弧（250，250，内半径，角+弧，角，真）；
ctx.stroke（）；
ctx.fill（）；
ctx.save（）；
ctx.shadowOffsetX=-1；
ctx.shadowOffsetY=-1；
ctx.shadowBlur=0；
ctx.shadowColor=“rgb（220220）”；
ctx.fillStyle=“黑色”；
ctx.平移（250+数学坐标（角度+圆弧/2）*文本半径，
250+数学正弦（角度+圆弧/2）*文本半径）；
ctx.旋转（角度+圆弧/2+数学PI/2）；
var text=重新启动[i]；
ctx.fillText（text，-ctx.measureText（text）.width/2，0）；
ctx.restore（）；
} 
//箭
ctx.fillStyle=“黑色”；
ctx.beginPath（）；
ctx.moveTo（250-4250-（Adius+5））；
ctx.lineTo（250+4250-（半径+5））；
ctx.lineTo（250+4250-（adius-5））；
ctx.lineTo（250+9250-（adius-5））；
ctx.lineTo（250+0250-（adius-13））；
ctx.lineTo（250-9250-（Adius-5））；
ctx.lineTo（250-4250-（Adius-5））；
ctx.lineTo（250-4250-（半径+5））；
ctx.fill（）；
}
}
函数自旋（）{
SpingleStart=Math.random（）*10+10；
自旋时间=0；
spinTimeTotal=Math.random（）*3+4*1000；
旋转车轮（）；
}
函数rotateWheel（）{
自旋时间+=30；
如果（自旋时间>=自旋时间总计）{
停止旋转车轮（）；
返回；
}
var spinAngle=spinAngleStart-easeOut（自旋时间，0，spinAngleStart，SpinangleTotal）；
startAngle+=（spinAngle*Math.PI/180）；
drawRouletteWheel（）；
spinTimeout=setTimeout（'rotateWheel（）'，30）；
}
功能停止旋转轮（）{
clearTimeout（spinTimeout）；
变量度=startAngle*180/Math.PI+90；
var arcd=arc*180/Math.PI；
var指数=数学地板（（360度/360度）/arcd）；
ctx.save（）；
ctx.font='bold 30px Helvetica，Arial'；
var text=重新启动[索引]
ctx.fillText（文本，250-ctx.measureText（文本）.width/2250+10）；
ctx.restore（）；
}
功能输出（t、b、c、d）{
变量ts=（t/=d）*t；
var tc=ts*t；
返回b+c*（tc+-3*ts+3*t）；
}
drawRouletteWheel（）；

我已经在帖子中为您发布了这张图片，但您可能也应该在帖子中包含您的代码，而不仅仅是链接到JSFIDLE。也就是说，您似乎没有尝试过任何方法来解决这个问题……感谢@NiettheDarkAbsolStop编码，打开电视上的命运之轮，看到轮子旋转，开心点，问题解决了。。。下一个SDD-Stackoverflow驱动的开发。：）虽然这些链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能会变得无效。谢谢@NateKerkhofs，我会尝试。@NiettheDarkAbsol我已经用Javascript和HTML更新了原始答案。然而，我并不是想回答这个问题，而是想巧妙地暗示他应该先在谷歌上搜索，然后再让我们基本上为他编写程序。@NateKerkhofs谢谢你更新了答案。但是，如果有这样的含义，您可能应该使用这些链接进行注释；）我想那可能是更好的选择。我仍在试图弄清楚什么时候发布答案，什么时候发布评论。我一直在想：如果你在询问信息，就发表评论。如果您正在提供解决方案或尝试解决方案，请发布答案。

<input type="button" value="spin" style="float:left;" />
<canvas id="canvas" width="500" height="500"></canvas>

var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
             "#2E2C75", "#673A7E", "#CC0071", "#F80120",
             "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["Wendy's", "McDonalds", "Chick-fil-a", "Five Guys",
                   "Gold Star", "La Mexicana", "Chipotle", "Tazza Mia",
                   "Panera", "Just Crepes", "Arby's", "Indian"];

var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;

var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var ctx;

function drawRouletteWheel() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var outsideRadius = 200;
    var textRadius = 160;
    var insideRadius = 125;

    ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,500,500);


    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;

    ctx.font = 'bold 12px Helvetica, Arial';

    for(var i = 0; i < 12; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = colors[i];

      ctx.beginPath();
      ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
      ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();

      ctx.save();
      ctx.shadowOffsetX = -1;
      ctx.shadowOffsetY = -1;
      ctx.shadowBlur    = 0;
      ctx.shadowColor   = "rgb(220,220,220)";
      ctx.fillStyle = "black";
      ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 
                    250 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = restaraunts[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      ctx.restore();
    } 

    //Arrow
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
    ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.fill();
  }
}

function spin() {
  spinAngleStart = Math.random() * 10 + 10;
  spinTime = 0;
  spinTimeTotal = Math.random() * 3 + 4 * 1000;
  rotateWheel();
}

function rotateWheel() {
  spinTime += 30;
  if(spinTime >= spinTimeTotal) {
    stopRotateWheel();
    return;
  }
  var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
  startAngle += (spinAngle * Math.PI / 180);
  drawRouletteWheel();
  spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
  clearTimeout(spinTimeout);
  var degrees = startAngle * 180 / Math.PI + 90;
  var arcd = arc * 180 / Math.PI;
  var index = Math.floor((360 - degrees % 360) / arcd);
  ctx.save();
  ctx.font = 'bold 30px Helvetica, Arial';
  var text = restaraunts[index]
  ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
  ctx.restore();
}

function easeOut(t, b, c, d) {
  var ts = (t/=d)*t;
  var tc = ts*t;
  return b+c*(tc + -3*ts + 3*t);
}

drawRouletteWheel();