Javascript 以更大角度环绕圆的项目
我正在使用所选项目创建圆形导航。当用户单击任何项目时,它将移动到定义的某个点。一切都很好,除了当你继续单击项目时,动画行为不同,项目在360度循环中移动,并且重置,直到你重复该场景,我希望它像第一次一样平滑,比如用户单击项目的次数,它应该平滑移动 一旦你点击项目,你就会看到这种行为Javascript 以更大角度环绕圆的项目,javascript,jquery,geometry,Javascript,Jquery,Geometry,我正在使用所选项目创建圆形导航。当用户单击任何项目时,它将移动到定义的某个点。一切都很好,除了当你继续单击项目时,动画行为不同,项目在360度循环中移动,并且重置,直到你重复该场景,我希望它像第一次一样平滑,比如用户单击项目的次数,它应该平滑移动 一旦你点击项目,你就会看到这种行为 // rotate circle functions var p = $(".cirlec-slider-bg"); $(".cirlec-slider-bg .f-courses").clone().appendT
// 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);
})
}
在单击处理程序中打印
dataAngle
的值表明它有时超出了允许的范围[0,180]
-它可能变为负值或大于360
补救方法是在检索dataAngle
后添加以下行:
dataAngle -= Math.floor(dataAngle / 360.0) * 360;
(请注意,这与数据角度%360不同)
谢谢你,我正试着使用Math.PIfunction@HushmeCSS使用学位,所以我不知道为什么
Math.PI
会有用?那是个错误,我自己做了这一切,坚持做简单的事情我有多蠢有时候你坚持做简单的事情,这是一个错误proof@Hushme“愚蠢”?相反,我认为这个小部件很酷。