Jquery - 使图像围绕中心点旋转答案

【问题标题】：Jquery - Make images rotate rotate around a center pointJquery - 使图像围绕中心点旋转
【发布时间】：2013-11-28 16:12:32
【问题描述】：

我正在尝试制作一个动画，其中有 8 个图标围绕中心点旋转。我做了 CSS 旋转动画，但这不是我想要的，因为图像最终是颠倒的，而不是向上的。看图片

我需要找到一种方法让图标围绕中心点旋转但保持向上。有谁知道怎么做或者有插件可以做吗？

提前感谢您的帮助。丹尼斯

【问题讨论】：

你能为此准备一个 jsFiddle 吗？
这可能正是您想要的：stackoverflow.com/questions/14057780/…

标签： jquery animation rotation

【解决方案1】：

这需要一些编码，但您可以为 0.0 到 2*PI 的角度设置动画，然后根据该角度计算图标的位置。

var x = dist * cos(angle);
var y = dist * sin(angle);

【讨论】：

【解决方案2】：

几个月前我为客户创建了这个（虽然是纯 javascript）

诀窍是将小圆圈（图像本身）反向旋转为大圆圈（每个圆圈的路径）

我还使用一个名为data-angle 的属性来指定和更改它在大圆圈中的位置，例如<div class="circle one" data-angle=270>1</div>

var circleArray = document.getElementsByClassName("circle");
var angle = 0;

chargearray();

function chargearray () {
    for (var i = 0, j = circleArray.length; i < j; i++) {
        var circle = circleArray[i];
        var circleAngle = parseInt (circle.dataset.angle);
        var totalAngle = angle + circleAngle
        var style = "rotate(" + totalAngle + "deg) translate(200px)";
        totalAngle = - totalAngle;
        style = style + " rotate(" + totalAngle + "deg)"
        circle.style.webkitTransform = style;
        circle.style.Transform = style;
    }
}

document.onkeydown = function (e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
        case 37:
            angle = angle + 30;
            chargearray ();
            break;
        case 39:
            angle = angle - 30;
            chargearray ();
            break;
    }
}

Here is the production version

Here is a more basic version of it

Here is an absolute bare-bones version

最终产品中内置导航的主要形式是回答问题的按钮，但用户也可以使用左箭头或右箭头进行导航（这是基本版本的工作方式）。

添加点击导航也是一项简单的任务，只需将angle更改为您想要的元素的程度并运行changearray

【讨论】：