Drehen mit javascript

Wollte ich drehen, div. Nach viel Forschung, es ist kein javascript zu drehen ein div, ohne mit der css transform, es sei denn, jquery-Bibliothek verwendet wird. Das problem ist, ich möchte noch eine kleine Drehung, und das hinzufügen der Bibliothek für Sie, dass ist keine option für mich.Css transform funktioniert nicht auf IE.

Mit dieses Beispiel Uhr die Minuten, Stunden und Sekunden drehen mit javascript selbst.

Kann jemand mir helfen, ein div zu drehen, auf IE7, und oben mit Hilfe von javascript selbst, ohne irgendwelche zusätzlichen Bibliotheken?

  • Nichts dreht an der Uhr, und es nicht nur JavaScript. Es ist ein separater div für jeden Punkt, die JS greift auf die DOM-verschieben Sie die einzelnen div-das macht die Seite, die verschoben wird.
  • Mmmmm css3pie.com schmeckt goooooood. (Tipp: CSS3 im IE)
  • Ich wage Sie zu drehen, etwas in ie8 und unteren mithilfe von css3pie. css3pie.com/documentation/supported-css3-features
  • Ha, war mir nicht bewusst. 😀
  • Möglicherweise finden Sie w3fools.com nützlich...
InformationsquelleAutor slovaiwi | 2011-08-05
  1. 3

    Es ist ein bisschen spät, aber ich habe geschrieben einige code, dies zu tun.

    http://jsfiddle.net/rlemon/73DzT/

    Object.prototype.rotate = function(d) {
    var s = "rotate(" + d + "deg)";
    if (this.style) { //regular DOM Object
        this.style.MozTransform = s
        this.style.WebkitTransform = s;
        this.style.OTransform = s;
        this.style.transform = s;
    } else if (this.css) { //JQuery Object
        this.css("-moz-transform", s);
        this.css("-webkit-transform", s);
        this.css("-o-transform", s);
        this.css("transform", s);
    }
    this.setAttribute("rotation", d);
}

    kann verwendet werden, mit regelmäßigen Objekte oder mit JQuery-Objekten. und speichert ein Attribut namens "rotation" geben Sie es die aktuelle rotation-Wert. Sie können spielen, um mit diesem und sehen, was Sie mit oben kommen kann.

    • Schöne Arbeit rlemon. Danke für das teilen!
    • Jetzt müssen Sie nur hinzufügen, IE filter support 3:D
    InformationsquelleAutor rlemon
  2. 1

    Ist es möglich, zu tun, mit raw-CSS-ohne javascript und jQuery:

    $('#idElement').css({
    /*modern browsers*/
     '-moz-transform':'rotate(88deg)',
     '-webkit-transform':'rotate(88deg)',
     '-o-transform':'rotate(88deg)',
     '-ms-transform':'rotate(88deg)'
     /*IE:*/
     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476), /* IE6,IE7 */
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
});

    Können Sie die meisten auf jeden Fall ändern-element-Attribute mit einfachen javascript, wie:

    document.getElementById("idElement").setAttribute("-moz-transform", "rotate(88deg)");
    • Danke, werde in diese Aussehen 🙂
    InformationsquelleAutor ThatGuy
  3. 0

    Ich verstehe es nicht, warum nicht mit jQuery, wenn seine viel einfachere Lösung?

    Hier ist schnelles script, das ich geschrieben

    $(document).ready(function(){
    $('#element').easyRotate({
       degrees: 45
    });
});

    Für javascript, die Sie benötigen, um Bilder von Ihrer div und als drehen Sie die Bilder innerhalb des div. Ich machte einfaches Beispiel, das zu tun:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
    <title></title>
</head>

<body>
    <div id="div1">
        <img name="img1" src="myimage1.jpg" id="img1">
        <br>
        <br>
        <input type="button" value="Rotate this image" onclick="rotate()">
    </div><script type="text/javascript">
var tally = 0;
    function rotate() {
    if (tally == 0) {
    document.images["img1"].src= "myimage2.jpg";
    tally = 1;
    return true;
    }
    else {
    document.images["img1"].src= "myimage1.jpg";
    tally = 0;
    return true;
    }
    }
    </script>
</body>
</html>
    • Dzoki, das Ziel der website, die Mehrheit der Nutzer mit GPRS, das eine sehr langsame Verbindung. Meine Website auf eine ganze 50kb, auf der client-Seite und ich will nicht, um jQuery verwenden, da die (minified, sogar)die Bibliothek ist 35 kb. da nur eine Drehung erforderlich ist, hinzufügen von jquery scheint nicht gut.
    • Das javascript oben flips Bilder in einem div anstatt zu versuchen, es zu drehen. Soweit ich denken kann, werde ich verwenden, Math-Bibliothek zu ändern, die absolute Position der div muss ich drehen
    • Sie können online-Bibliothek können Sie nicht? Ich bin nicht vertraut mit es. Ich werde versuchen zu finden eine andere Lösung für Sie dann, wenn Sie nicht bekommen eine bessere Antwort in dieser Zeit.
    InformationsquelleAutor Dzoki
Schreibe einen Kommentar