jq中使用rotate方法旋转图片和css中使用rotate方法旋转图片
时间:2019-03-18
本文章向大家介绍jq中使用rotate方法旋转图片和css中使用rotate方法旋转图片,主要包括jq中使用rotate方法旋转图片和css中使用rotate方法旋转图片使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
当一个页面中有多个图片需要进行旋转操作的时候。
说明:在进行图片旋转的时候,需要注意的点1.宽高在旋转的时候需要做变换。2.显示图片的区域需要将图片区域的宽高写死。
- jq中使用rotate方法旋转图片
function rotateImg(objId){
var image = new Image();
image = document.getElementById(objId);
var w = image.width;
var h = image.height;
var dg = $("#"+objId).attr("degree");
dg = Number(dg)+90;
$("#"+objId).rotate(dg);
$("#"+objId).attr("degree",dg);
$("#"+objId).attr("width",h);
$("#"+objId).attr("height",w);
$("#"+objId).css("transform-origin","70.5% 50% 0px");
// 图片显示区域
var can = $("#canvasT_"+objId).offset();
$("#"+objId).offset({top:can.top,left:can.left});
}
注:使用jq进行图片旋转的时候,在jq的rotate()方法里,可能有一个全局的变量控制传入的角度degree(暂时没找到方法在哪里),因此,在一个页面有多个图片需要进行旋转的时候,当第一个图片旋转了90度,就算第二个图片传入方法的度数为90度,实际在旋转的时候却是旋转了180度,因此,这种方式不使用一个页面多张图片旋转的情况。
- 使用css方法旋转图片
// 使用css方法旋转图片
function rotateImg(objId){
var image = new Image();
image = document.getElementById(objId);
var w = image.width;
var h = image.height;
var dg = $("#"+objId).attr("degree");
dg = Number(dg)+90;
$("#"+objId).css("transform","rotate("+dg+"deg)");
$("#"+objId).attr("degree",dg);
$("#"+objId).attr("width",h);
$("#"+objId).attr("height",w);
$("#"+objId).css("transform-origin","70.5% 50% 0px");
var can = $("#canvasT_"+objId).offset();
$("#"+objId).offset({top:can.top,left:can.left});
}
注:使用css对图片进行旋转的方式,这种方式暂时未发现什么弊端,在一个页面有多个图片需要进行旋转的时候可使用。
- Java消息队列--ActiveMq 实战
- Java消息队列-Spring整合ActiveMq
- 【知识】SAS数据分析完整笔记(3)
- 深入浅出Redis-Spring整合Redis
- Stream-快速入门Stream编程
- MySQL Regular Expression
- Jenkin-持续集成
- 4.3.4.7 Pattern Matching
- mysql left join、right join、inner join用法分析
- _CrtSetDbgFlag
- UNPv13:#第3章#套接字编程简介
- UNPv13:#第4章#基于TCP套接字编程
- UNPv13:#第5章#TCP客户/服务器程序示例
- MySQL replace用法简介
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- R语言广义线性模型(GLMs)算法和零膨胀模型分析
- R语言中广义线性模型(GLM)中的分布和连接函数分析
- R语言自适应平滑样条回归分析
- R语言区间数据回归分析
- R语言ggsurvplot绘制生存曲线报错 : object of type ‘symbol‘ is not subsettable
- R软件SIR模型网络结构扩散过程模拟
- R语言中使用线性模型、回归决策树自动组合特征因子水平
- R语言缺失值的处理:线性回归模型插补
- R语言如何解决线性混合模型中畸形拟合(Singular fit)的问题
- Android如何在Gradle中更改APK文件名详解
- 面试中常见的 C 语言与 C++ 区别的问题
- Linux系统实现ansible自动化安装配置httpd的方法
- 常用Linux发行版镜像源配置小结
- Linux如何处理文件已删除但空间不释放的问题
- 解析linux或android添加文件系统的属性接口的方法