jqueryrotate - 一个可以帮助我们在页面上实现元素的旋转效果的jQuery的插件
  • 分享到微信朋友圈
    X
查看演示

关于jqueryrotate

jqueryrotate 是可以实现 jQuery 旋转效果的插件，它支持 Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用duTransform，低版本ie使用VML实现。

如何使用jqueryrotate

步骤1：引入必要的文件

jquery.js和rotate.js

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>

步骤2：html代码

<img id="img1" src="images/pic.png" />

步骤3：调用rotate。

<script>
    $(document).ready(function () {
        $('#img1').rotate({ angle: 45 });
    });
</script>

参数说明

  • angle 数字 旋转一个角度 默认值0

  • animateTo 数字 从当前的角度旋转到多少度 默认值0

  • step 函数 每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数

  • easing 函数 自定义旋转速度、旋转效果，需要使用 jQuery.easing.js

  • duration 整数 旋转持续时间，以毫秒为单位

  • callback 函数 旋转完成后的回调函数

  • getRotateAngle 函数 返回旋转对象当前的角度

  • stopRotate 函数 停止旋转

更多演示

演示地址