让图片旋转任意角度及JQuery插件使用介绍


Posted in Javascript onMarch 20, 2013

引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度,
例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中
就是将id为rotate-image的图片旋转45度。

不过,貌似在Chrome中总是不显示。
唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽。
解决办法是,把$("#rotate-image").rotate(45);放在
$(window).load(function(){ });中,因为在Chrome中图片在执行$(document).ready(function(){ });中的语句时并没有加载完图片,坑爹啊。

另外可以更方便的通过调用$("选择器").rotateRight()和$("选择器").rotateLeft()来分别向右旋转90度和向左旋转90度。

jquery.rotate.js:

jQuery.fn.rotate = function(angle,whence) { 
var p = this.get(0); 
// we store the angle inside the image tag for persistence 
if (!whence) { 
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360; 
} else { 
p.angle = angle; 
} 
if (p.angle >= 0) { 
var rotation = Math.PI * p.angle / 180; 
} else { 
var rotation = Math.PI * (360+p.angle) / 180; 
} 
var costheta = Math.round(Math.cos(rotation) * 1000) / 1000; 
var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000; 
//alert(costheta+","+sintheta); 
if (document.all && !window.opera) { 
var canvas = document.createElement('img'); 
canvas.src = p.src; 
canvas.height = p.height; 
canvas.width = p.width; 
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')"; 
} else { 
var canvas = document.createElement('canvas'); 
if (!p.oImage) { 
canvas.oImage = new Image(); 
canvas.oImage.src = p.src; 
} else { 
canvas.oImage = p.oImage; 
} 
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); 
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width); 
var context = canvas.getContext('2d'); 
context.save(); 
if (rotation <= Math.PI/2) { 
context.translate(sintheta*canvas.oImage.height,0); 
} else if (rotation <= Math.PI) { 
context.translate(canvas.width,-costheta*canvas.oImage.height); 
} else if (rotation <= 1.5*Math.PI) { 
context.translate(-costheta*canvas.oImage.width,canvas.height); 
} else { 
context.translate(0,-sintheta*canvas.oImage.width); 
} 
context.rotate(rotation); 
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); 
context.restore(); 
} 
canvas.id = p.id; 
canvas.angle = p.angle; 
p.parentNode.replaceChild(canvas, p); 
} 
jQuery.fn.rotateRight = function(angle) { 
this.rotate(angle==undefined?90:angle); 
} 
jQuery.fn.rotateLeft = function(angle) { 
this.rotate(angle==undefined?-90:-angle); 
}
Javascript 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 #Javascript
javascript中[]和{}对象使用介绍
Mar 20 #Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 #Javascript
javascript中注册和移除事件的4种方式
Mar 20 #Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 #Javascript
jQuery实现id模糊查询的小例子
Mar 19 #Javascript
JS文本框不能输入空格验证方法
Mar 19 #Javascript
You might like
PHP通用检测函数集合
2006/11/25 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python中的Django基本命令实例详解
2018/07/15 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
创建文明学校实施方案
2014/03/11 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
python某漫画app逆向
2021/03/31 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL