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实现图片放大,缩小,翻转,旋转小实例

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

图片旋转jquery.rotate

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Jquery-Rotate实现查看原图并旋转图片

Jquery-Rotate实现查看原图并旋转图片

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

jquery实现css3旋转效果

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

js实现旋转的图片

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

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

原生JS图片翻转动画

如何通过js获取到CSS3里面transform rotate旋转角度的度数,matrix解析

如果你曾想通过下面这条语获取transform的值 [javascript] view plain copy $(objName).css('transform');   ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery插件让图片旋转任意角度且代码极其简单
举报原因:
原因补充:

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