Rotate using javascript
I wanted to rotate a div. After a lot of research, there is no javascript to rotate a div without using the css transform, unless jquery library is used. The problem is I want to do a small rotation, and adding the library for that is not an option for me.Css transform does not work on IE.
With this example clock the minut开发者_高级运维es, hours and seconds rotate using javascript itself.
Can anyone help me get a div to rotate on IE7, and above using javascript itself without any additional libraries?
It's a bit late, but I have written some code to do this.
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);
}
can be used with regular objects or with JQuery objects. and stores an attribute called "rotation" to give you it's current rotation value. You can play around with this and see what you can come up with.
It's possible to do using raw CSS without javascript and 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 */
});
You can most definately change element attributes using simple javascript such as:
document.getElementById("idElement").setAttribute("-moz-transform", "rotate(88deg)");
I don't get it why not using jQuery when its lots easier solution?
Here is fast script i written
$(document).ready(function(){
$('#element').easyRotate({
degrees: 45
});
});
For javascript you need to make pictures of your div and than rotate those pictures inside the div. I made simple example of doing that:
<!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>
加载中,请稍侯......
精彩评论