您的位置：首页 > Web前端

Web前端_图片旋转

2012-04-21 16:11 155 查看

项目中用到了这样的东东

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

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度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web function jquery timer chrome safari

相关文章推荐

新的分享

章节导航