使用HTML标签的属性对图片进行旋转效果

这两天老大让我写一个让照片翻转的效果，甚是痛苦，下面是我的一些个人心得

 

在W3C官方的标准里，通过transform属性使对象旋转的写法如下：
transform: rotate(40deg); /* 其中40是旋转的角度 */

 

可是由于目前几乎所有的浏览器对这个属性的渲染效率都很低，所以我们可以用下面的hack去提高渲染效率：
-o-transform: rotate(40deg); /* Opera浏览器 */
-webkit-transform: rotate(40deg); /* Webkit内核浏览器 */
-moz-transform: rotate(40deg); /* Firefox浏览器 */

 

下面是IE旋转滤镜的代码——right是顺时针旋转，left是逆时针旋转

var right90="progid:DXImageTransform.Microsoft.Matrix(M11=0,M21=1,M12=-1,M22=0, sizingmethod='auto expand')";
var right180="progid:DXImageTransform.Microsoft.Matrix(M11=-1,M21=0,M12=0,M22=-1, sizingmethod='auto expand')";
var right270="progid:DXImageTransform.Microsoft.Matrix(M11=0,M21=-1,M12=1,M22=0, sizingmethod='auto expand')";
var right360="";
var left90="progid:DXImageTransform.Microsoft.Matrix(M11=0,M21=-1,M12=1,M22=0, sizingmethod='auto expand')";
var left180="progid:DXImageTransform.Microsoft.Matrix(M11=-1,M21=0,M12=0,M22=-1, sizingmethod='auto expand')";
var left270="progid:DXImageTransform.Microsoft.Matrix(M11=0,M21=1,M12=-1,M22=0, sizingmethod='auto expand')";

  

如何在插件中添加需要的属性值？
也许在插件中添加一些标记性的属性是很难的，因为在初始化的时候就需要对其进行赋值，因此要弄懂插件的原理，对于应用来说没有必要弄清楚里面的工作原理，那如何添加这样的标记值呢？其实可以自己添加一个HTML标签，然后再在HTML标签中添加自己定义的属性，给该属性赋值，就能当做是记录全局变量的参数，只要页面不刷新，这个值就是一直存在的，符合ajax的操作规则。

 

如何给下面的给标签添加自定义的属性？(使用jquery帮助解决)

$("#change_image_").attr("_height",$("#lightbox-image").css("height"));//作为全局变量添加参数
$("#change_image_").attr("_width",$("#lightbox-image").css("width"));
$("#lightbox-image").css("filter",right270);//添加滤镜效果
$("#lightbox-image").attr("_rotate",image_rotate_angle);//作为旋转角度的标记

  

几种刷新页面的方法：
window.location.reload()//刷新当前页面.
parent.location.reload()//刷新父亲对象（用于框架）
opener.location.reload()//刷新父窗口对象（用于单开窗口）
top.location.reload()   //刷新最顶端对象（用于多开窗口）