项目中用到了这样的东东
先声明一下,以下代码来自以下网址:简明现代魔法
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度。