пятница, 12 июля 2013 г.

Revolver

<!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>

Комментариев нет:

Отправить комментарий