图片/图形

跨浏览器控制图片旋转jQuery插件

创客主机


jQueryRotate.js是一款跨浏览器控制图片旋转jquery插件。jQueryRotate.js旋转图片插件可以使用CSS3动画来对图片进行任意角度的旋转。对于不支持CSS3动画的浏览器,插件会自动使用canvas或VML(IE6)技术进行回退。

使用方法

在页面<中引入jQueryRotate.js文件。

  1. <script src="path/to/jquery.min.js"></script>
  2. <script src="path/to/jQueryRotate.js"></script>

API

jQueryRotate.js插件集成了4个用于图片旋转的方法,分别为:

  1.     rotate(angle)
  2.     rotate(parameters)
  3.     getRotateAngle()
  4.     stopRotate()

一、rotate(angle):简单的将图片旋转任意角度。

  1. $("#img").rotate(45);

二、rotate(parameters):通过配置参数来旋转图片。

parameters参数包括:

angle [Number] :图片旋转角度,默认为0度

bind [Object] : 绑定事件

animateTo [Number] :图片旋转到指定的角度,默认为0

center [Array] : 定义图片旋转的中心点

duration [Number] - 图片旋转的持续时间,默认为1000

step [Function] :每一步动画后执行的回调函数

easing [Function] :图片旋转的easing动画

callback[Function] :图片旋转动画结束后的回调函数

三、getRotateAngle():返回图片旋转的角度。

  1. $("#img").rotate({
  2.   angle: 45,
  3.     bind: {
  4.       click : function(){
  5.       alert($(this).getRotateAngle());
  6.     }
  7.   }
  8. });

四、stopRotate():停止图片旋转动画。

  1. $("#img").rotate({
  2.   bind: {
  3.     click: function(){
  4.       $("#img").rotate({
  5.         angle: 0,
  6.         animateTo: 180,
  7.         duration: 6000
  8.       });
  9.       setTimeout(function(){
  10.         $("#img").stopRotate();
  11.       }, 1000);
  12.     }
  13.   }
  14. });

Github地址:https://github.com/wilq32/jqueryrotate

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!