Div mit Mauszeiger mitdrehen lassen Javascript

  • JavaScript

Es gibt 4 Antworten in diesem Thema. Der letzte Beitrag () ist von shutdown.

    Div mit Mauszeiger mitdrehen lassen Javascript

    Hi Leute.

    Ich versuche nun schon eine ganze Weile ein Div, per Javascript, mit der Maus drehen zu lassen.

    Also das Div soll sozusagen immer zur Maus "hinsehen" und an seinem Platz rotieren.

    Dafür habe ich jetzt schon die Funktion zur Bestimmung der Mausposition
    und die zum drehen eines Divs. So jetzt wollte ich mal fragen wie ich
    dass mit dem drehen zum Mauszeiger anstellen könnte?

    Ich habe schon versucht den Winkel immerwieder neu berechnen zu lassen,was aber sehr schwer ist.

    Villeicht gibt es ja dafür eine Funktion oder irgendeine Parend child beziehung die ich nutzen könnte und nur nicht kenne.

    Ich hoffe ihr habt mein Problem verstanden und habt vl. 1-2 Lösungsansätze für mich parat.

    Lg shutdown.

    Myrax schrieb:

    Du kannst eigentlich mit JS das MouseMove-Event abonnieren, berechnen und dann sowas anwenden: davidwalsh.name/css-transform-rotate
    Falls es ein Spiel werden soll: lass es. Für JS bzw. Webbrowser-Spiele gibt es Canvas.

    Naja eine Funktion zum drehen von divs habe ich schon:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title></title>
    6. <style>
    7. </style>
    9. </head>
    10. <body>
    12. <div title="random" style="top:250px; position:absolute; left:224px;" id="random" ><img src="bild.bmp" alt="Bild nicht mehr verfügbar" /></div>
    13. <script type="text/javascript">
    15. function rotate (elem, deg)
    16. {
    18. if (navigator.appName=='Microsoft Internet Explorer')
    19. {
    20. rad = deg*Math.PI/180;
    22. elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
    24. elem.filters.item(0).M11 = Math.cos(rad);
    25. elem.filters.item(0).M12 = -Math.sin(rad);
    26. elem.filters.item(0).M21 = Math.sin(rad);
    27. elem.filters.item(0).M22 = Math.cos(rad);
    28. elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px'
    29. elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px'
    30. }
    31. else
    32. {
    34. elem.style.MozTransformOrigin = "5px 5px";
    35. elem.style.WebkitTransformOrigin = "5px 5px";
    36. elem.style.OTransformOrigin = "5px 5px";
    37. elem.style.MsTransformOrigin = "5px 5px";
    38. elem.style.transformOrigin = "5px 5px";
    40. elem.style.MozTransform = 'rotate(' + deg + 'deg)';
    41. elem.style.WebkitTransform = 'rotate(' + deg + 'deg)';
    42. elem.style.OTransform = 'rotate(' + deg + 'deg)';
    43. elem.style.MsTransform = 'rotate(' + deg + 'deg)';
    44. elem.style.transform = 'rotate(' + deg + 'deg)';
    45. }
    46. }
    47. </script>
    48. </body>
    49. </html>


    UNd die Mausposition habe ich ausch schon ermittelt:

    HTML-Quellcode

    1. document.onmousemove = function(e) {
    2. X = e.pageX || event.clientX + document.body.scrollLeft;
    3. Y = e.pageY || event.clientY + document.body.scrollTop;
    5. };

    Aber die Berechnung ist noch ein bisschen ein Problem. Wie kann ich dann den Winkel ausrechenen?
    Muss ich dass wirklich jedes mal dann über den Sinus/Cosinus-Satz machen, oder gibt es da schon etwas vordefiniertes???

Facebook
Telefonspende