让图片旋转任意角度及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 相关文章推荐
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
vue组件添加事件@click.native操作
Oct 30 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变量修饰符static的使用
2013/06/28 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php实现生成验证码实例分享
2016/04/10 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
js 替换
2008/02/19 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
python实现在windows下操作word的方法
2015/04/28 Python
python字典排序实例详解
2015/05/20 Python
python查询mysql,返回json的实例
2018/03/26 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
软件售后服务方案
2014/05/29 职场文书
禁烟标语大全
2014/06/11 职场文书
中专生自荐信
2014/06/25 职场文书
银行工作心得体会范文
2016/01/23 职场文书