Rotate any Div in html jquery.
==========================
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Multirotation test</title>
<script type="text/javascript" src="../js/jquery-1.6.js"></script>
<script type="text/javascript" src="jquery.multirotation-1.0.js"></script>
</head>
<style type="text/css">
div{text-align:center;margin:auto}
div.rotable{background:#00CC66;border:solid 2px #f00;color:#fff;width:10px;height:10px;padding:5px;margin-top:60px;margin-bottom:60px}
</style>
<body>
<div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="img_test" class="rotable">Amit
</div>
<p id="degs"></p>
</div>
</body>
<script type="text/javascript">
function plus(id) {
$(id).rotate({ angle: 10 });
get(id);
return false;
}
function minus(id) {
$(id).rotate({ angle: 90, direction: false });
get(id);
return false;
}
function reset(id) {
$(id).clearRotation();
get(id);
return false;
}
function get(id) {
var degs = $(id).getCurrentDegrees();
//$('p#degs').html("Current degs: <b>" + degs + "°</b>");
}
var ang=1;
intervalID=setInterval("setRotate('#img_test');",100);
function setRotate(id) {
$(id).rotate({ angle: 5 });
get(id);
}
</script>
</html>
HERE IS THE jquery.multirotation-1.0.js CODE:
-----------------------------------------------------------------------
(function($){
//global array to save the current rotation of the elements
$.elems_rotation_history = [];
$.fn.extend({
clearRotation: function() {
return this.each(function() {
//get the element's identifier
var id = this.id;
//remove element from array
$.elems_rotation_history[id] = null;
});
},
getCurrentDegrees: function() {
var id = this.attr('id');
if (!$.elems_rotation_history[id]) {
return 0;
}
return degs = $.elems_rotation_history[id].rotation;
},
rotate: function(options) {
//create console
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
//set the default values
var defaults = {
angle: 0
, direction: true
, speed: 0
, deg2radians: Math.PI * 2 / 360
///debug
, debug: false
///end
};
//to access options values use this: options.option_name
var options = $.extend(defaults, options);
return this.each(function() {
//get the element's identifier
var id = this.id;
//if there aren't elements and there isn't the element into the array, sets rotation to 0
if ($.elems_rotation_history && !$.elems_rotation_history[id]) {
$.elems_rotation_history[id] = { rotation: 0 };
}
//sets the rotation direction
if (!options.direction) {
options.angle = options.angle * (-1);
}
//increments angle rotation of the element
$.elems_rotation_history[id].rotation = (parseInt($.elems_rotation_history[id].rotation) + options.angle) % 360;
///debug
if (options.debug) {
console.log("Angle = " + $.elems_rotation_history[id].rotation + " degree");
}
///end
rad = $.elems_rotation_history[id].rotation * options.deg2radians;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
var a = parseFloat(costheta).toFixed(8);
var b = parseFloat(sintheta).toFixed(8);
var c = parseFloat(-sintheta).toFixed(8);
var d = parseFloat(costheta).toFixed(8);
var sMatrix = "matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0)";
if ($(this).get(0).filters) {
if (options.speed > 0) {
console.warn("You set the speed options but IE doesn't support CSS3 transitions");
}
//if the browser is IE
try {
var x = $(this).get(0).filters.item("DXImageTransform.Microsoft.Matrix").enabled;
}
catch(e) {
$(this).get(0).style.filter += "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand');";
}
var matrix = $(this).get(0).filters.item("DXImageTransform.Microsoft.Matrix");
matrix.M11 = costheta;
matrix.M21 = sintheta;
matrix.M12 = -sintheta;
matrix.M22 = costheta;
matrix.enabled = true;
///debug
if (options.debug) {
console.log("Set transform = matrix[" + matrix.M11 + ", " + matrix.M21 + ", " + matrix.M12 + ", " + matrix.M22 + "]");
}
///end
} else {
//animate rotation if speed > 0s
if (options.speed > 0) {
$(this).css("-moz-transition", "all " + options.speed + "s ease-in-out");
$(this).css("-webkit-transition", "all " + options.speed + "s ease-in-out");
$(this).css("-o-transition", "all " + options.speed + "s ease-in-out");
}
$(this).css("-moz-transform", sMatrix);
$(this).css("-webkit-transform", sMatrix);
$(this).css("-o-transform", sMatrix);
///debug
if (options.debug) {
console.log("Set transform = " + sMatrix);
}
///end
}
});
}
});
})(jQuery)
Posts
