图片旋转 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

图片旋转 rotate相关推荐

数据增强方法：图片镜像、图片缩放、图片旋转、加噪点
1.图片镜像 //rotate with mirror #include <iostream> #include <opencv2/opencv.hpp> using name ...
2D转换之旋转——rotate的用法
2D转换之旋转--rotate的用法首先,我们给一张图片作为研究对象,在这里,需要给出图片的储存路径,示例代码如下: <body><img src="E:\HTML+CS ...
pygame.tranform.rotate图片旋转问题
这是我第一次写博客,也是想和大家分享一些学习过程,同时也是记录一下自己的学习过程,最近无聊,想写一个游戏,想了很久就想写个简单的弹幕游戏,但是我希望的操控的对象可以不停的旋转,然后就接触到了rotat ...
CSS3图片旋转功能transform:rotate以及Canvas旋转示例
<!DOCTYPE html> <html> <head><title>CSS3旋转图片</title><style>.demo ...
iOS 图片处理-图片旋转和裁剪
项目中要求处理图片, 简单记录一下图片旋转和裁剪过程 /** 将图片旋转弧度radians */ - (UIImage *)imageRotatedByRadians:(CGFloat)radians ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（1）
文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)--滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas ...
python实现图形旋转_python轻松实现图片旋转
小编尝试了一下用Python旋转图片,效果还是很不错的,下面就和大家一起分享一下! #首先建好一个数据_ud文件夹 import PIL.Image as img import os path_old ...
flex 图片旋转（解决公转和自转问题）
在Flex中图片的旋转是既有公转和自转的.这样在图片旋转的时候就有一定小麻烦: 为了更好地说明问题,先引入两个概念:"自转"和"公转".想象一下,地球在绕着太阳 ...
qt 实现以图片为中心让它旋转_QT图片旋转动画
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html 1.1 QT图片旋转动画 1. ...

图片旋转 rotate

图片旋转 rotate相关推荐

最新文章

热门文章