Skip to content

Wir bilden einen Kreis…

Juni 9, 2013

… aus Elementen in JavaScript mit jQuery.

Es kommt mir blöd vor, Elemente per Hand in einem Kreis anzuordnen… das muss doch irgendwie anders gehen. Da war doch mal was aus dem Mathe-Unterricht mit Trigonometrie.

Der Code ist zwar noch nicht wirklich schön, aber es ging mir erstmal nur um die Funktionalität.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
    <style type="text/css">
        #position {
            position: fixed;
            top: 200px;
            left: 200px;
        }
        div.point {
            position: absolute;
        }
    </style>
    <script type="text/javascript">

        $(document).ready(function() {

            var radius = 100;
        
            var points = $('div.point');

            var ratio     = 360 / points.length;
            var toRadiant = Math.PI / 180;
            var factor    = toRadiant * ratio;

            var step = 0;

            points.each(function() {
                
                var asRadiant = step * factor;
                
                var y = Math.round(radius * Math.sin(asRadiant));
                var x = Math.round(radius * Math.cos(asRadiant));
                
                $(this).css('left', x + 'px');
                $(this).css('top',  y + 'px');
                
                step++;
                
            });

        });
        
    </script>    
</head>
<body>
    <div id="position">
        <div class="point">Eins</div>
        <div class="point">Zwei</div>
        <div class="point">Drei</div>
        <div class="point">Vier</div>
        <div class="point">Fünf</div>
        <div class="point">Sechs</div>
        <div class="point">Sieben</div>
    </div>
</body>
</html>
Advertisements

From → Uncategorized

Schreibe einen Kommentar

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: