1. jquery rotate插件 （不支持连续旋转，有动画效果）
参看：http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html
<img id="image3" src="http://i53.tinypic.com/181we8.jpg"><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript">$(document).ready(function(){$('#image3').rotate({maxAngle:25,minAngle:-55,bind:[{"mouseover":function(){$(this).rotateAnimation(85);}},{"mouseout":function(){$(this).rotateAnimation(-35);}}]});$('#image2').rotateAnimation({angle:5});$('#image').rotate(-25);});
</script>
Usage:
jQuery(imgElement).rotate(angleValue)
jQuery(imgElement).rotate(parameters)
jQuery(imgElement).rotateAnimation(parameters)
jQuery(imgElement).rotateAnimation(parameters)
Returns:
jQueryRotateElement – !!! NOTICE !!! function return rotateElement instance to help connect events with actually created 'rotation' element.
Parameters:
({angle:angleValue,
[preservePosition:preservePositionBoolean],
[animateAngle:animateAngleValue],
[maxAngle:maxAngleValue],
[minAngle:minAngleValue],
[callback:callbackFunction],
[animatedGif:animatedGifBoolean],
[bind:[{event: function},{event:function} ] })
jQuery(imgElement).rotateAnimation
Where:
– angleValue – clockwise rotation given in degrees,
– [preservePositionBoolean] (boolean) – optional parameter, preserves an image position instead of increasing size for bounding box
– [animateAngleValue] – optional parameter, animate rotating into this value,
– [maxAngleValue] – optional parameter, maximum angle possible for animation,
– [minAngleValue] – optional parameter, minimum angle possible for animation,
– [callbackFunction] – optional function to run after animation complete,
– [animatedGifBoolean](boolean) – optional set to display animated gif in firefox/chrome/safari !!! this might slow down browser because it need to render image again and again to display animation,
– [bind: [ {event: function}…] -optional parameter, list of events binded to newly created rotateable object
2. jquery rotate插件 （支持连续旋转， 无 动画效果）
参看： http://code.google.com/p/jquery-rotate/
<!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>jQuery 任意角度旋转</title>
<style type="text/css">
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {width: 100%; height: 100%; overflow: hidden; position: relative; }
#middle { *position: absolute; top: 50%; *left: 50%; text-align:center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; *position: absolute; }
#inner {position: relative; top: -50%; *left: -50%; margin: 0 auto; } /* for explorer only */
#outer[id] {display: table; position: static;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script>
</head>
<body>
<div id="outer"> <div id="middle"> <div id="inner" style="border:red 2px solid;width:300px;height:300px;padding:3px;"><img id="theimage" border="0" src="118812060.jpg" /></div> </div>
</div>
<div style="position: relative;height:40px;margin-top:-40px;">
<input type="button" value="<-Rotate" name="RotateL" id="RotateL" οnclick="$('#theimage').rotateRight(30);">
<input type="button" value="Rotate->" name="RotateR" id="RotateR" οnclick="$('#theimage').rotateRight(-30);">
</div>
</body>
</html>
3. JavaScript 版 （支持连续旋转，无动画效果）
<script>
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Benoit Asselin | http://www.ab-d.fr */function rotate(p_deg) {if(document.getElementById('canvas')) {/*Ok!: Firefox 2, Safari 3, Opera 9.5b2No: Opera 9.27*/var image = document.getElementById('image');var canvas = document.getElementById('canvas');var canvasContext = canvas.getContext('2d');switch(p_deg) {default :case 0 :canvas.setAttribute('width', image.width);canvas.setAttribute('height', image.height);canvasContext.rotate(p_deg * Math.PI / 180);canvasContext.drawImage(image, 0, 0);break;case 90 :canvas.setAttribute('width', image.height);canvas.setAttribute('height', image.width);canvasContext.rotate(p_deg * Math.PI / 180);canvasContext.drawImage(image, 0, -image.height);break;case 180 :canvas.setAttribute('width', image.width);canvas.setAttribute('height', image.height);canvasContext.rotate(p_deg * Math.PI / 180);canvasContext.drawImage(image, -image.width, -image.height);break;case 270 :case -90 :canvas.setAttribute('width', image.height);canvas.setAttribute('height', image.width);canvasContext.rotate(p_deg * Math.PI / 180);canvasContext.drawImage(image, -image.width, 0);break;};} else {/*Ok!: MSIE 6 et 7*/var image = document.getElementById('image');switch(p_deg) {default :case 0 :image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';break;case 90 :image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';break;case 180 :image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';break;case 270 :case -90 :image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';break;};};
};// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {if (oldonload) {oldonload();}func();}}
}addLoadEvent(function() {var image = document.getElementById('image');var canvas = document.getElementById('canvas');if(canvas.getContext) {image.style.visibility = 'hidden';image.style.position = 'absolute';} else {canvas.parentNode.removeChild(canvas);};rotate(0);
});</script><p>rotate:<input type="button" value="0" οnclick="rotate(0);"><input type="button" value="90" οnclick="rotate(90);"><input type="button" value="180" οnclick="rotate(180);"><input type="button" value="-90" οnclick="rotate(-90);">
</p>
<p><img id="image" src="118812060.jpg" alt="t90" /><canvas id="canvas"></canvas>
</p>
两者均支持IE6+, Firefox 3+, Chrome