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

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

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

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

源码介绍

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

调用方法:在页面中引入bootstrap-3.3.4.css,在页面中引入jQueryRotate.js文件。

 rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css"> 
 
 src="path/to/jquery.min.js"> 
 src="path/to/jQueryRotate.js">

               

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弹窗插件dialog
上一篇 2018-05-03 12:50:16
html5 svg不规则棱形背景动画特效
2018-05-22 08:58:53 下一篇

发表评论

登录... 后才能评论