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

原创 2013年12月04日 09:52:47

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

 

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

解决图片旋转的问题

用法://Environment.getExternalStorageDirectory()得到磁盘根目录 File inputImagePath = new File(Environment.get...

和图片有关的几个旋转属性

和图片有关的几个旋转属性: 1 UIImage的UIImageOrientation属性。常见并且也是网上很容易查到的一个属性。值从0开始: typedef NS_ENUM(NSInteger,U...

html页面旋转图标或标签

.open{ transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-...

[html5入门-5]html5中旋转块级元素的简单小方法

在写html5网页时会遇到需要在块级元素中倾斜的字体或需要插入倾斜的图片,初学者(比如我)往往希望利用最少的代码来实现这个功能,现给大家分享一种代码拿去就可以用的简单方法。 举例代码如下: ...

HTML中 点击图片翻转文字

HTML中 点击图片翻转文字

使用HTML5 canvas 标签进行图片裁剪、旋转、缩放

代码使用到的js插件:jquery、bootstrap、lrz。 jquery就不说了,基本都知道。bootstrap是一个响应式的前端ui框架。使用它是为了在手机端查看页面时能够自适应宽高。lrz...
  • hzw2312
  • hzw2312
  • 2015年08月17日 15:12
  • 17739

HTML5 3D图片旋转效果

  • 2017年12月06日 17:13
  • 393KB
  • 下载

HTML+css+JavaScript 实例应用 图片旋转切换效果

今天照着网上视频做了一个九宫格图片旋转切换效果页面,做完后我又自己做了个类似的简单页面。在此分享!不懂的可以查找相应的文档API~ test *{ margin:0;padding:0;...

HTML基础 body标签text属性将普通文本颜色改为白色,实现有趣的密文效果

慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 1、代码                            ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用HTML标签的属性对图片进行旋转效果
举报原因:
原因补充:

(最多只允许输入30个字)