图片旋转 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)
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" onclick="$('#theimage').rotateRight(30);">
<input type="button" value="Rotate->" name="RotateR" id="RotateR" onclick="$('#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.5b2
No: 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" onclick="rotate(0);">
<input type="button" value="90" onclick="rotate(90);">
<input type="button" value="180" onclick="rotate(180);">
<input type="button" value="-90" onclick="rotate(-90);">
</p>
<p>
<img id="image" src="118812060.jpg" alt="t90" />
<canvas id="canvas"></canvas>
</p>
两者均支持IE6+, Firefox 3+, Chrome