具有较高角度的圆圈周围的项目答案

【问题标题】：Items around circle with higher angles具有较高角度的圆圈周围的项目
【发布时间】：2018-09-04 21:53:29
【问题描述】：

我正在使用所选项目创建圆形导航。当用户单击任何项目时，它将移动到定义的某个点。一切都运行良好，除了当你继续点击项目时，当动画表现不同并且项目在 360 度圈中移动并且它被重置直到你重复这个场景时，我希望它像第一次一样流畅，就像多少次用户一样点击它应该平滑移动的项目。

代码JSFIDDLE LINK 一旦您点击项目，您就会看到该行为

// rotate circle functions
var p = $(".cirlec-slider-bg");
$(".cirlec-slider-bg .f-courses").clone().appendTo(p);

var a = -($('.cirlec-slider-bg').width() / 2);
var b = $('.cirlec-slider-bg .f-courses').length;
var c = 360 / b;
rotateCircle(c, 'domReady');

$(".cirlec-slider-bg").on("click", ".f-courses", function(e) {
    if ($(this).hasClass('active')) {} else {
        $('.cirlec-slider-bg .f-courses').removeClass("active");
        $(this).addClass('active');
        var dataAngle = parseInt($(this).attr('data-angle'));
        var maxangle = 90 - dataAngle;


        rotateCircle(maxangle, 'onitemClick')
    }

});

function rotateCircle(maxangle, type) {
    $('.cirlec-slider-bg .f-courses').each(function(index) {

        if (type == 'onitemClick') {
            var maxAngle = maxangle;
            var dataAngle2 = parseInt($(this).attr('data-angle'));
            var maxangle2 = dataAngle2 + maxAngle;
            var d = (index) * c;
        }
        if (type == 'domReady') {
            var maxAngle = maxangle;
            var maxangle2 = (index) * maxAngle;
        }

        var m = [
            "translate(-50%, -50%) rotate(", -90, "deg) translateY(" + 100 + "px) rotate(", 90, "deg)"
        ];
        m[1] = maxangle2;
        m[3] = 0 - maxangle2;
        $(this).css({
            "transform": m.join("")
        });

        $(this).attr('data-angle', maxangle2);
    })
}

【问题讨论】：

标签： javascript jquery geometry

【解决方案1】：

在点击处理程序中打印dataAngle 的值表明它有时会超出[0, 180] 的允许范围——它可能变为负数或大于360。

补救方法是在检索到dataAngle后添加以下行：

dataAngle -= Math.floor(dataAngle / 360.0) * 360;

（注意这里和dataAngle % 360不一样）

Fixed JSFiddle

【讨论】：

谢谢，我正在尝试使用 Math.PI 函数
@Hushme CSS 使用度数所以我不知道为什么 Math.PI 会有用？
那是错误的，我自己做了这一切，并坚持简单的事情，我是多么愚蠢
有时你会停留在简单的东西上
@Hushme“愚蠢”？相反，我认为这个小部件很酷。