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

当前位置:主页 > jQuery库 > 图片效果 > 跨浏览器控制图片旋转jquery插件
跨浏览器控制图片旋转jquery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-05-10
    阅读:
麦子学院
简要教程

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

使用方法

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

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

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

  • rotate(angle)
  • rotate(parameters)
  • getRotateAngle()
  • stopRotate()

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

$("#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():返回图片旋转的角度。

$("#img").rotate({
  angle: 45,
    bind: {
      click : function(){
      alert($(this).getRotateAngle());
    }
  }
});
                

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

$("#img").rotate({
  bind: {
    click: function(){
      $("#img").rotate({
        angle: 0,
        animateTo: 180,
        duration: 6000
      });
      setTimeout(function(){
        $("#img").stopRotate();
      }, 1000);
    }
  }
});                   
                

jQueryRotate.js控制图片旋转jquery插件的github地址为:https://github.com/wilq32/jqueryrotate

网友评论