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

引入下方的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);
}

赞 (0)

相关推荐

  • jQuery实现可以控制图片旋转角度效果(附demo源码下载)

    jQuery实现可以控制图片旋转角度效果(附demo源码下载)

    本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

  • jQuery制作图片旋转效果

    jQuery制作图片旋转效果

    以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片旋转的半径 (2)图片旋转的过程需要用到setInterval()方法,来获取每一张图片所在位置的的角度,角度会根据时间变化逐渐变化 (3)根据一个数学公式:x=R*SIN(deg)可以获得图片在X方向的位置 (4)透明度的设置其实也是根据图片旋转时候的角度来定的.初始设置图片在正前方时是0度,无论

  • jquery实现LED广告牌旋转系统图片切换效果代码分享

    jquery实现LED广告牌旋转系统图片切换效果代码分享

    本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果. LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现LED广告牌旋转

  • 基于jQuery Circlr插件实现产品图片360度旋转

    基于jQuery Circlr插件实现产品图片360度旋转

    Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示. 它的特点有: 支持水平或垂直方向旋转. 支持移动触摸事件. 支持滚动事件. 图片预加载处理. 可以反向和循环旋转图片. jQ酷实例教程:jQuery产品图片360度旋转Circlr 引入核心文件 <script sr

  • jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

    jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

    本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法.分享给大家供大家参考,具体如下: 推荐一个图片旋转插件,用于浏览相册时,旋转图片. 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <script type="text/javascript"> $(document).ready(function () { $("#images").rotate(45); var value = 0 $("#images

  • jquery 圆形旋转图片滚动切换效果

    jquery 圆形旋转图片滚动切换效果

    这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用. PS: 经过修改已经兼容大众浏览器.效果图:在线演示:http://demo.jb51.net/js/ImagesRotateScroll/index.htmlStep1. 创建HTML 复制代码 代码如下: <div id="rotatescroll"> <div class="viewport"> <ul class="overview&

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

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中 就是将id为rotate-image的图片旋转45度. 不过,貌似在Chrome中总是不显示. 唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽. 解决办法是,把$("#rotate-

  • opencv图片的任意角度旋转实现示例

    opencv图片的任意角度旋转实现示例

    目录 一 旋转角度坐标的计算 二 旋转任意角度的步骤 三 实现 一 旋转角度坐标的计算 1.如果O点为圆心,则点P绕点O旋转redian弧度之后,点P的坐标变换为点Q的计算公式为: Q.x=P.x*cos(redian)-P.y*sin(redian) Q.y=P.x*sin(redian)+P.y*cos(redian) redian表示的为弧度 弧度与角度的变换公式为: redian=pi*180/angle 2. 如果O点不是圆心,则点P绕点O旋转redian弧度之后,点P的坐标变换为Q的

  • C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字

    前言 这篇文章是 GDI+ 总结系列的第三篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求 需求是要实现给图片添加任意角度旋转的文字,文字的旋转中心要是在文字区域中央,就像 CSS 的 rotate 函数一样的效果.如下: 分析&思路 Graphics 类有个 RotateTransform 方法,可以传入任意角度的值来旋转画板.但是这个方法的旋转中心是画板的左上角,所以直接单单用这个方法不能满足我们的需求.此外, Graphics

  • java实现图片无损任意角度旋转

    前言 在做项目的时候遇到一个业务需要对图片进行旋转,于是找到一个工具类,亲测有效:在此与大家共享,需要用时可以直接用哈! 实战 一.旋转工具类代码: package zh.test.utils; import java.awt.*; import java.awt.image.BufferedImage; /** * 图片旋转工具类 */ public class RotateImage { /** * 对图片进行旋转 * * @param src 被旋转图片 * @param angel 旋转

  • 14款经典网页图片和文字特效的jQuery插件-前端开发必备

    14款经典网页图片和文字特效的jQuery插件-前端开发必备

    不废话了,直接贴图片了,亲们可以点击查看演示和下载源码哦. 经典1.网页图片3d旋转jQuery代码 查看演示  下载插件 经典2.存css3实现的tabl选项卡代码 查看演示 下载插件 经典3.jQuery标签旋转代码 查看演示  下载插件 经典4.鼠标悬浮的图片选项卡代码 查看演示  下载插件 经典5.鼠标往下滚动时文字变大的css3代码 查看演示  下载插件 经典6.动画标签云网页代码 查看演示  下载插件 经典7.css3文字晃动代码 查看演示  下载插件 经典8.css3幻灯片代码 查

  • Java实现图片翻转以及任意角度旋转

    最近几天在做一个项目,因为涉及到了图片(绝大部分都不是整图,是把一张张的大图切成小图,也就是Title)的翻转以及90°旋转,弄得焦头烂额.在网上搜索好几天,发现用到的方法都是比较公式化的,对于只是在绘图的时候需要显示翻转而不需要另外生成图片的情况,这些代码用起来非常的麻烦.最后仔细的研究了一下JDK文档,用Graphics2D很简单的就实现了以下功能: 1.图片的翻转,包括水平翻转以及垂直翻转 2.图片的任意角度旋转.因为工程需要,代码里面都直接写成了+90,根据需要,可以对这个值进行改动,以

  • Unity实现绕任意轴任意角度旋转向量

    Unity实现绕任意轴任意角度旋转向量

    本文实例为大家分享了Unity实现绕任意轴任意角度旋转向量的具体代码,供大家参考,具体内容如下 游戏中有一需求,就是一个矩形或者Cube绕着某一点旋转任意角度,现在给出下面算法. public static Vector3 RotateRound(Vector3 position, Vector3 center, Vector3 axis, float angle) { Vector3 point = Quaternion.AngleAxis(angle, axis) * (position -

  • 50 个 jQuery 插件可将你的网站带到另外一个高度

    50 个 jQuery 插件可将你的网站带到另外一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性--除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创

  • 2014年50个程序员最适用的免费JQuery插件

    2014年50个程序员最适用的免费JQuery插件

    有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎可以解决一个网站所有的问题它可以从做一个有吸引力和创意的网站解决所有那些阻碍你的问题如果你想解决任何跨浏览器的问题,那就必须收藏使用JavaScript函数库 jQuery库是Web开发人员的重要来源.你会发现很多互联网的jQuery插件都是免费使用的,但发现这些优秀的jQuery插件,需要你花费许

随机推荐