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

所属分类:媒体-滑块和旋转

 3825  58  查看评论 (1)
jquery跨浏览器控制图片旋转插件jQueryRotate.js ie兼容6

jQueryRotate.js说明

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);
    }
  }
});
相关插件-滑块和旋转

jQuery滑块插件slider

jQuery滑块插件slider很强大
  滑块和旋转
 12990  60

jQuery轮播图点击放大

jQuery轮播图点击放大,即可点击轮播又可点击图片放大图片
  滑块和旋转
 11150  53

好看的滑动显示插件-LATERAL ON-SCROLL SLIDING

LATERAL ON-SCROLL SLIDING 是一款基于Jquery和css3开发的全屏滑动插件。将页面分为左边和右边,一边的内容是经过圆形遮罩的图片,而另一边则是相关的文字介绍。而且相邻行的图片和文字左右顺序是交替的。 随着浏览器滚动条向下移动,可视区下方的图片和文字将会以动画的形式从两边移动到靠近中线。当滚动条向上移动时,则下方淡出可视区的图片和文字将会以动画的形式向两边移开。
  滑块和旋转
 14607  81

jQuery滑块插件Divas Slider

Divas Slider是一个多才多艺的jQuery滑块,容易使用和完全可定制。 充分响应和触摸启用。详细使用方法请查看下载文件中的instructions.html
  滑块和旋转
 17304  51

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    iexn 0
    2017/5/16 9:25:06

    感觉有点麻烦啊    低版浏览器考虑用一下

    回复
取消回复