图片旋转 rotate

天梯梦

浏览: 13747008 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript /Jquery / Bootstrap / Web

jQuery JavaScript Chrome Firefox Microsoft

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" 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

jQueryRotate.zip (28.6 KB)
下载次数: 182

jquery.rotate.rar (817 Bytes)
下载次数: 121

分享到：

php全面获取url地址栏及各种参数 | 开启 Appserv 的 curl 功能

2010-11-26 22:58
浏览 9037
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论