Mittwoch, 10. Februar 2010

Permanentes Rotieren eines Bildes mit Hilfe von dynamisch erzeugten CSS und ohne jQuery

var j = 0;
var i = 0;

function getRandom( min, max ) {
if( min > max ) {
return( -1 );
}
if( min == max ) {
return( min );
}

return min + parseInt( Math.random() * ( max-min+1 ) );
}


function langsamRotieren() {

if( document.styleSheets[0].cssRules ) {
if (j == 0) {
j = getRandom(0,3600);
}
j++;
document.getElementById("rotatingImage").className = 'rot' + j % 3600 ;
window.setTimeout("langsamRotieren()",1);
} else if ( document.styleSheets[0].rules ) {
j = getRandom(0,4);
document.getElementById("rotatingImage").className = 'rot' + j ;
}
}



function init() {

if( document.styleSheets ) {
var myStyle = document.createElement("style");
var styles = document.styleSheets.length;

myStyle.setAttribute( "type", "text/css" );
document.getElementsByTagName("head")[0].appendChild(myStyle);

myStyle = document.styleSheets[styles-1];

if( document.styleSheets[0].cssRules ) {
while (i < 3600) {
i++;
myStyle.insertRule(".rot" + i + " { -moz-transform: rotate(" + (i/10)*1 + "deg);-webkit-transform: rotate(" + (i/10)*1 + "deg); }", 0);

}
} else if ( document.styleSheets[0].rules ) {
while (i < 4) {
i++;
myStyle.addRule(".rot" + i , "filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=" + i + ");");
}
}
}

langsamRotieren ();

}

init();
</script>

Keine Kommentare:

Kommentar veröffentlichen