zoukankan      html  css  js  c++  java
  • jQuery旋转插件

    jQuery旋转插件,支持Internet Explorer 6.0 + 、Firefox 2.0、Safari 3、Opera 9、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。调用和方法: < strong> rotate(angle) angle参数:[Number]–默认为0–根据给定的角度旋转图片例如:

    $("#img").rotate(45);

    rotate(parameters) parameters参数:[Object]包含旋转参数的对象。支持的属性:

    1. angle属性:[Number]–default 0–旋转的角度数,并且立即执行例如:
      $("#img").rotate({angle:45});
    2. bind属性:[Object]对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样你可以在内部链式调用-$(this).rotate(…)。例如(click on arrow):
      $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180})}}});
    3. animateTo属性:[Number]–default 0–从当前角度值动画旋转到给定的角度值(或给定的角度参数)例如:结合上面的例子,请参阅使用。
    4. duration属性: [Number]–指定使用animateTo的动画执行持续时间例如 (click on arrow) :
          $("#img").rotate({
          bind: {
          click: function() {
          $(this).rotate({
          duration: 6000,
          angle: 0,
          animateTo: 100
          })
          }
          }
          }); 
    5. step属性: [Function]–每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
    6. easing属性:[Function]–默认(see below)–Easing function used to make animation look more natural.It takes five parameters(x,t,b,c,d)to support easing from http:
          function(x,t,b,c,d){return-c*((t=t/d - 1) * t * t * t - 1) + b
          } 

      Where:t:current time,b:begInnIng value,c:change In value,d:duration,x:unused No easing(linear easing):

          function(x,t,b,c,d){return(t/d) * c
          } 

      Example(click on arrow):

      $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180,easing:$.easing.easeInOutElastic})}}});
    7. callback属性:[Function]动画完成时执行的回调函数例如(click on arrow):
      $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180,callback:function(){alert(1)}})}}});

    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)}}});

    用这个可以实现很多关于旋转的网页特效。

  • 相关阅读:
    [WP8.1UI控件编程]SemanticZoom控件实现分组列表
    [深入浅出WP8.1(Runtime)]Toast通知
    [深入浅出WP8.1(Runtime)]生成图片和存储生成的图片文件
    [深入浅出WP8.1(Runtime)]应用文件的URI方案
    [深入浅出WP8.1(Runtime)]浮出控件(Flyout)
    [深入浅出WP8.1(Runtime)]文本框(TextBox)
    [深入浅出WP8.1(Runtime)]文本块(TextBlock)
    [深入浅出WP8.1(Runtime)]Windows Phone 8.1和Silverlight 8.1的区别
    [WP8.1UI控件编程]Windows Phone XAML页面的编译
    [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化
  • 原文地址:https://www.cnblogs.com/loveYN/p/4530083.html
Copyright © 2011-2022 走看看