jqueryRotate图片旋转插件的入门实例及使用方法

文章标签: 图片特效 帮助手册
  • :
  • 05-03 16:04
  • :
  • 22次
  • :
  • 0条
  • 1赞

简介本文提供jqueryRotate插件的一些新手入门基础实例,通过这些实例可以让你快速的掌握jqueryRotate插件的使用。l

和jquery的其它插件一样,把jqueryRotate插件引入到我们的网页里后,就可以像下面这样来使用了:


1.使图片旋转指定的角度:

$("#img").rotate(45);
//或者下面这种方法
$("#img").rotate({angle: 45});	


2.鼠标经过图片时,让图片旋转:

$("#img").rotate({
  bind:{
    mouseover : function() {
        $(this).rotate({animateTo:180})
    },
    mouseout : function() {
        $(this).rotate({animateTo:0})
    }
  }
});


3.让图片不停的自动旋转:

var angle = 0;
setInterval(function(){
    angle+=3;
    $("#img").rotate(angle);
},50);	


4.点击图片后,让图片旋转指定的角度:

var value = 0
$("#img").rotate({
  bind:{
    click: function(){
      value +=90;
      $(this).rotate({ animateTo:value})
    }
  }
});


您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-14 10:07:15