JQuery插件让图片旋转任意角度且代码极其简单

原创 2012年03月31日 11:45:58

引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度,

例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });

就是将id为rotate-image的图片旋转45度。

不过,貌似在Chrome中总是不显示。

唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽。

解决办法是,把$("#rotate-image").rotate(45);放在

$(window).load(function(){ });中,因为在Chrome中图片在执行$(document).ready(function(){ });中的语句时并没有加载完图片,坑爹啊。

另外可以更方便的通过调用$("选择器").rotateRight()$("选择器").rotateLeft()来分别向右旋转90度和向左旋转90度。


jquery.rotate.js:

jQuery.fn.rotate = function(angle,whence) {
	var p = this.get(0);

	// we store the angle inside the image tag for persistence
	if (!whence) {
		p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
	} else {
		p.angle = angle;
	}

	if (p.angle >= 0) {
		var rotation = Math.PI * p.angle / 180;
	} else {
		var rotation = Math.PI * (360+p.angle) / 180;
	}
	var costheta = Math.round(Math.cos(rotation) * 1000) / 1000;
	var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000;
	//alert(costheta+","+sintheta);
 
	if (document.all && !window.opera) {
		var canvas = document.createElement('img');

		canvas.src = p.src;
		canvas.height = p.height;
		canvas.width = p.width;

		canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
	} else {
		var canvas = document.createElement('canvas');
		if (!p.oImage) {
			canvas.oImage = new Image();
			canvas.oImage.src = p.src;
		} else {
			canvas.oImage = p.oImage;
		}

		canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
		canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);

		var context = canvas.getContext('2d');
		context.save();
		if (rotation <= Math.PI/2) {
			context.translate(sintheta*canvas.oImage.height,0);
		} else if (rotation <= Math.PI) {
			context.translate(canvas.width,-costheta*canvas.oImage.height);
		} else if (rotation <= 1.5*Math.PI) {
			context.translate(-costheta*canvas.oImage.width,canvas.height);
		} else {
			context.translate(0,-sintheta*canvas.oImage.width);
		}
		context.rotate(rotation);
		context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
		context.restore();
	}
	canvas.id = p.id;
	canvas.angle = p.angle;
	p.parentNode.replaceChild(canvas, p);
}

jQuery.fn.rotateRight = function(angle) {
	this.rotate(angle==undefined?90:angle);
}

jQuery.fn.rotateLeft = function(angle) {
	this.rotate(angle==undefined?-90:-angle);
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Jquery垂直/水平旋转

jquery制作图片垂直翻转动画特效 *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoration:no...

点击旋转图片90度-jquery

#div1 { width: 800px; height: 600px; background-color: #ff0; position: relative; } .imgRotate { widt...

优雅的图片翻转实现方式rollover.js

html img{ width:100px;

jquery实现css3旋转效果

1.使用animate方法实现不了呢 $(".box_rotate").animate({transform:"rotate(30deg)"},500);

js实现旋转的图片

gif可以实现旋转的图片,但是怎么使用js实现的。自己想了一下,打算实现一下,整体思路也很简单,每隔一段时间,旋转一下图片,看起来就像在一直旋转一样。实例地址 起始rotate.js的代码如下: ...

jquery实现图片放大,缩小,翻转,旋转小实例

测试兼容ie6,firefox3.6,chrome 10.0.648.133   New Document      https://ajax.googleapis.com/ajax/li...
  • Truong
  • Truong
  • 2014-03-29 11:50
  • 18425

jquery实现简单的图片翻转效果

鼠标经过图片图片翻转显示图片背后的文字(对于其中引用的jquery文件、图片,需要用自己的)         Title             *{margin: 0;pad...

图片旋转jquery.rotate

转载自:http://www.css88.com/archives/4519 下载地址:http://plugins.jquery.com/rotate/ 网上发现一个很有意思的jQuer...

原生JS实现图片翻转旋转效果

原生JS图片翻转动画

利用exif.js解决ios手机上传竖拍照片旋转90度问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非...
  • linlzk
  • linlzk
  • 2015-09-22 12:46
  • 34162
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)