关闭

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

1083人阅读 评论(0) 收藏 举报

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

 

在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()   //刷新最顶端对象(用于多开窗口)

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:322725次
    • 积分:8882
    • 等级:
    • 排名:第2253名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:5条
    最新评论