<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function createRevolver(e) {
var liElements = e.find('li');
var liElementsNumber = liElements.length;
// Начальный угол поворота
var RotateAngle = 0;
// Шаг движения по окружности
var RotateAngleStep = 360 / liElementsNumber;
// Число Пи
var pi = Math.PI;
// Координаты центра окружности
var CenterX = 200;
var CenterY = 200;
// Страртовые координаты и длина радиуса окружности
var StartX = 200;
var StartY = 100;
var RadiusX = StartX - CenterX;
var RadiusY = StartY - CenterY;
function RotateX (CurrentX, RadiusX, RadiusY, RotateAngle) {
var Angle = 2*pi + RotateAngle/180*pi;
var RotationX = RadiusX*Math.cos(Angle) - RadiusY*Math.sin(Angle) - RadiusX;
var NextX = Math.floor(CurrentX + RotationX);
return NextX;
}
function RotateY (CurrentY, RadiusX, RadiusY, RotateAngle) {
var Angle = 2*pi + RotateAngle/180*pi;
var RotationY = RadiusX*Math.sin(Angle) + RadiusY*Math.cos(Angle) - RadiusY;
var NextY = Math.floor(CurrentY + RotationY);
return NextY;
}
var NextX = StartX;
var NextY = StartY;
for (var i = 0; i < liElementsNumber; i++) {
liElements.eq(i).css({
'position': 'absolute'
, 'left': NextX + 'px'
, 'top': NextY + 'px'
});
RotateAngle += RotateAngleStep;
NextX = RotateX(StartX, RadiusX, RadiusY, RotateAngle);
NextY = RotateY(StartY, RadiusX, RadiusY, RotateAngle);
}
}
$(document).ready(function(){
createRevolver($('#revolver'));
});
</script>
<title>Revolver</title>
</head>
<body>
<ul id="revolver">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</body>
</html>
Комментариев нет:
Отправить комментарий