Web前端_图片旋转

项目中用到了这样的东东

先声明一下,以下代码来自以下网址:简明现代魔法

http://www.nowamagic.net/javascript/js_ImageRotation.php

在看之前,可以先了解一下IE的滤镜:

progid:DXImageTransform.Microsoft.Matrix

progid:DXImageTransform.Microsoft.AlphaImageLoader

另外JQuery的一个专门旋转图片的插件地址:

http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js

代码如下:以下效果在chrome、firefox、opera、safari、IE6上测试都通过了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript图片旋转</title> 
<!--说明一下,下面这个样式是不能省略的,佛则在IE中是无法通过的,因为IE是用的滤镜。-->
<style type="text/css">
#demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
</style>
</head> 
<body>
<div id="container" style="width:520px;height:280px;position:relative;margin:0 auto">
<div id="demo" align="center">
<img src="1.jpg" width="520" height="280" />
</div>
</div>
</body>
<script>
var Img = function() {
var T$ = function(id) { return document.getElementById(id); }
var ua = navigator.userAgent,
isIE = /msie/i.test(ua) && !window.opera;
var i = 0, sinDeg = 0, cosDeg = 0, timer = null ;
var rotate = function(target, degree) {
target = T$(target);
var orginW = target.clientWidth, orginH = target.clientHeight;
clearInterval(timer);
function run(angle) {
if (isIE) { // IE
cosDeg = Math.cos(angle * Math.PI / 180);
sinDeg = Math.sin(angle * Math.PI / 180);
with(target.filters.item(0)) {
M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); 
}
target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
} else if (target.style.MozTransform !== undefined) {  // Mozilla
target.style.MozTransform = 'rotate(' + angle + 'deg)';
} else if (target.style.OTransform !== undefined) {   // Opera
target.style.OTransform = 'rotate(' + angle + 'deg)';
} else if (target.style.webkitTransform !== undefined) { // Chrome Safari
target.style.webkitTransform = 'rotate(' + angle + 'deg)';
} else {
target.style.transform = "rotate(" + angle + "deg)";
}
}
<!--这里是用了定时器调用run方法,当然,如果不需要旋转的动态效果可以直接调用run方法而不用定时器,从而达到让图片旋转任意角度的效果-->
timer = setInterval(function() {
i += 10;
run(i);
if (i > degree - 1) {
i = 0;
clearInterval(timer);
} 
}, 10); 
}
return {rotate: rotate}
}();
window.onload = function() {
Img.rotate('demo', 360);
document.getElementById('demo').onclick = function() {
Img.rotate('demo', 360);
}
}
</script>
</html>
下面看一下JQuery的插件是咋写的,用的canvas、具体实现跟上面差不多,jquery.rotate.1-1.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.cos(rotation);
	var sintheta = Math.sin(rotation);
	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的js库就可以直接调用了:例如$('#test').rotateRight(30);
其中的test是是要旋转的图片的id,这里30表示30度。

你可能感兴趣的:(jquery,Web,timer,function,chrome,Safari)