图片旋转效果的一些研究、jQuery插件及实例 (二)

javascript cooljun 1923℃ 0评论

四、CSS3与IE滤镜图片旋转综合与对比

不管三七二十一,先看一个综合实例,方便对比。
实现旋转90度和135度两个效果,CSS部分代码如下:

#rot90{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
#rot135{-moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');}

HTML部分:

<img id="rot90" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />旋转90°
<img id="rot135" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />旋转135°

以下为IE和Firefox下的对比图:
IE滤镜旋转和Firefox 下CSS旋转差异

正如上图标注的,虽然看上去实现的旋转效果是一样的,但实际上CSS3下的旋转不改变原始图片占据的空间的大小,所以您会看到使用CSS3 transform旋转的图片可那会覆盖在其他元素上,但是IE却不是如此,图片占据空间的大小一致是跟着旋转后的图片走的,所以IE滤镜实现的旋转就不会看到图片覆盖其他元素的情况,因为它会把它们挤开。

如果不考虑在中国使用率极低的Opera浏览器以及比较较低的Firefox2以及以下的浏览器,事情(图片旋转)似乎变得很容易。
,我们似乎可以轻松的实现图片的旋转——例如开始新浪微博图片旋转截图效果的实现只要变变class类就可以了。但是,我们可以放弃Opera浏览器以及Firefox2及以下版本的浏览器了吗?这要看你网站的目标群体,大小,及性质了。在目前的状况下,一般而言,是放弃不得了,这就迫使我们另谋出路,这就是HTML5中的canvas标签。

五、canvas标签与图片旋转

首先简单讲讲canvas标签,canvas属于HTML元素,是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持<canvas>标记(使用js插件也可以使IE支持canvas标签)。所以,虽然纯粹的CSS不能照顾到Opera浏览器以及低版本的Firefox,没有关系,我们可以使用canvas标签。

canvas只是有一个基于 JavaScript 的绘图 API,所以说要使用canvas绘图离不开JavaScript,题外话不说,我们看怎样利用canvas+JavaScript实现图片的旋转吧。

这里IE先放在一边,我们看看如何使用canvas实现旋转90度的效果,代码如下:

HTML部分 <canvas id="cv"></canvas>
<img id="cvImg" width="128" height="96" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /> JavaScript部分 window.onload = function(){
	var canvas = document.getElementById("cv");
	var oImg = document.getElementById("cvImg"); //旋转后canvas标签的大小 canvas.height = 128;
	canvas.width = 96; //绘图开始 var context = canvas.getContext("2d");
	context.save(); //改变中心点 context.translate(96,0); //旋转90° context.rotate(Math.PI/2); //绘制 context.drawImage(oImg, 0, 0, 128, 96);
	context.restore();
	oImg.style.display = "none";
};

结果在不支持CSS3 transform的Opera9浏览器下:
Opera下使用canvas实现的旋转效果

如果要让IE下也有同样的效果,很简单,加上这么句代码:
<!- -[if IE]><script type=”text/javascript” src=”http://www.zhangxinxu.com/style/js/excanvas.js“></script><![endif]- ->(这里为了防止注释冲突,双连线用空格隔开了)

其中链接的js文件是使IE浏览器也支持canvas标签的插件JavaScript,能实现大多数canvas标签实现的效果,图片的旋转当然不在话下,您可以试试。

六、旋转效果jQuery插件

通过上面的一些探讨,其实可以发现实现图片旋转的方法其实不少,这里介绍的这个jQuery插件使用的方法是:IE下滤镜+其他浏览器canvas的方法。

您可以狠狠地点击这里:旋转效果jQuery插件下载

插件压缩后不足2k,是款很轻量级的插件,很精巧。可以实现任意角度图片的旋转,使用方法也很简单。例如:$(“imgRotate”).rotate(90);就是表示旋转90度了,如果要实现向左转与向右转,有专门的方法,就是$(“选择器”).rotateLeft(); 与 $(“选择器”).rotateRight();

具体使用实例参见下一部分。

七、图片旋转实例

本实例要实现的效果就是新浪微博上的图片的“向左转”和“向右转”效果。将使用三种方法,一是忽略低版本Firefox与Opera浏览器的CSS方法;二是使用jQuery插件实现效果的示例;三是纯粹canvas标签无JavaScript库支持实现的方法。

不完全兼容的CSS方法
此方法的原理很简单,切换HTML元素对象(图片)的class。如下CSS代码:

.rot1{transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.rot2{transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
.rot3{transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

再添加简单的JavaScript代码——根据是向左转还是向右转动态改变class的名称就行了。再次提示下,IE8浏览器是使用的是-ms-filter直接filter没有效果。
这里使用的是CSS3+filter滤镜的方法,所以低版本的Firefox以目前版本的Opera浏览器下式没有效果的。但绝对适用于90%以上的互联网用户了。

您可以狠狠地点击这里:相关demo页面

jQuery插件实现方法
使用插件一般而言是比较简单的。但是这里,由于插件js是款相当轻量级的代码插件,功能有限。如果不做任何特别的处理的话,此插件只支持一次的图片旋转效果,因为分析插件可知,当运行一次canvas旋转后,canvas标签会将原来的图片标签代替掉,使得图片的连续旋转遇到麻烦,需要每次旋转后重新输入图片相关的HTML代码。
上面所述对应的JavaScript代码如下:

param.right.click(function(){
	if(!$("img#rotImg").length){ param.box.html('<img id="rotImg" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />'); }
	fun.right(); //执行向右旋转 return false;
});

js部分需要调养jQuery库和此轻量级旋转插件,至于详细的代码,您可以参见demo。

您可以狠狠地点击这里:jQuery插件实现demo

说明:此效果在IE下似乎有点问题,经常会有点击无旋转,再点击跳过刚才旋转的情况,我不清楚是次插件的问题,还是IE浏览器对filter矩阵滤镜数据变换效果的bug,还是自己js部分由问题,希望谁知道原因可以告诉一声,不甚感谢!

canvas方法
此方法不依赖任何的JavaScript库,兼容性强,而且没有出现一些不知名的问题,我自己是比较喜欢的。为了让其在IE下也支持canvas标签,需要调用一个js插件,由Google发起。此插件下载:excanvas.js

您可以狠狠地点击这里:canvas方法图片旋转demo页面

由于此方法我个人比较推荐,所以提供源文件下载。您可以狠狠地点击这里:canvas方法源文件下载(9.44K)

八、最后的唠叨

对于图片旋转的jQuery插件还有更强大的,例如:jQueryRotate.js,您有兴趣可以去网上搜一搜,其他的就不多说了,总之,希望对您的学习有所帮助。

还有,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以通过文章评论或是去这里进行一对一问答交流。

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=552

转载请注明:cooljun小窝 » 图片旋转效果的一些研究、jQuery插件及实例 (二)

如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)

您必须 登录 才能发表评论!