基本上我已经设法将我的 DIV 元素布置成圆形,但我还没有设法计算出如何计算旋转度数需要让它们从圆心向外。
$(document).ready(function(){
var elems = document.getElementsByClassName('test_box');
var increase = Math.PI * 2 / elems.length;
var x = 0, y = 0, angle = 0;
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
// modify to change the radius and position of a circle
x = 400 * Math.cos(angle) + 700;
y = 400 * Math.sin(angle) + 700;
elem.style.position = 'absolute';
elem.style.left = x + 'px';
elem.style.top = y + 'px';
//need to work this part out
var rot = 45;
elem.style['-moz-transform'] = "rotate("+rot+"deg)";
elem.style.MozTransform = "rotate("+rot+"deg)";
elem.style['-webkit-transform'] = "rotate("+rot+"deg)";
elem.style['-o-transform'] = "rotate("+rot+"deg)";
elem.style['-ms-transform'] = "rotate("+rot+"deg)";
angle += increase;
console.log(angle);
}
});
有没有人知道我该怎么做。
干杯-C
最佳答案
请注意,rot
取决于angle
,除了angle
是以弧度为单位。
DRY,所以要么从 Angular 转换为旋转:
// The -90 (degrees) makes the text face outwards.
var rot = angle * 180 / Math.PI - 90;
或者在设置样式时直接使用angle(但以弧度为单位),去掉rot
的声明:
// The -0.5*Math.PI (radians) makes the text face outwards.
elem.style.MozTransform = "rotate("+(angle-0.5*Math.PI)+"rad)";
关于javascript - 将 DIV 排成一圈,并朝外旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8533391/