图片的旋转可以说是一种效果,但是逐渐旋转已经不单单是属于视觉效果那个范畴,其更具有使用性,功能性。照片有时候是需要横过来的拍的,当我们预览或共享到web上时需要进行旋转。这个操作在以往可能更多的是交给软件去完成,然后再将旋转到正常角度的图片发布到web上。
我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果。我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转。
HTML
我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转。
?
1 2 3 4 5 6 7 |
<div id="tool"> |
Javascript
?
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function rotate(obj,arr){ |
我们写了个自定义函数rotate(),其中参数obj表示要旋转的图片对象的id,参数arr表示旋转方向,固定两个值:left(向左)和right(向右)。我们设置变量n是为了记录上下左右四种旋转状态,点击旋转按钮时可以保证持续的旋转的状态,即每次旋转是在上次旋转操作后的基础上再次旋转。
然后,我们要根据浏览器的不同进行不同的处理,对于IE系浏览器,可以使用他们特有的滤镜来实现旋转效果,虽然我们不建议使用滤镜,但为了兼容IE老版本,我们不得不重操这把旧刀。
?
1 2 3 4 5 6 7 8 9 10 |
function rotate(obj,arr){ |
代码中,我们使用document.all判断是否为IE浏览器,如果是则使用滤镜,而对于firefox和chrome这样的现代浏览器,我们使用canvas来实现旋转效果。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
function rotate(obj,arr){ |
代码中,我们创建canvas元素对象,并将图片赋予canvas对象,当变量n处于不同的状态(上下左右四个方向)时,使用canvas重新对图像进行绘制。
当然,图片的旋转效果实现还有一种解决方案,绕开html5,针对各不同的浏览器,比如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate(); 但这并不如html5的canvas实现的效果好。
以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。