图片旋转 rotate

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)

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