永发信息网

jquery.rotate.js库中的rotate函数怎么用。

答案:3  悬赏:80  手机版
解决时间 2021-01-31 21:05
jquery.rotate.js库中的rotate函数怎么用。
最佳答案
rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。
    rotate(angle)angle参数:[Number] – 默认为 0

根据给定的角度旋转图片例如:
$(“#img”).rotate(45);或 $(‘#img’).rotate({angle:45})rotate(parameters)parameters参数:[Object] 包含旋转参数的对象。
支持的属性:
1.angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行
例如:1$(“#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) 
默认: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 ; }
         
示例1:没有效果,一直转
 $("#scImg").rotate({
                              angle:0,
                              animateTo:360,
                              callback: rotation,
                                easing: function (x,t,b,c,d){     
                                      return (t/d)*c ;
                             }
                      });       
示例2: 默认的效果
         $("#scImg").rotate({
                              angle:0,
                              animateTo:360,
                              callback: rotation,
                              easing: function (x,t,b,c,d){
return -c*((t=t/d-1)*t*t*t-1)+b ;
                             }
                      });示例3:
$(“#img”).rotate({bind:{
    click: function(){
        $(this).rotate({
            angle: 0,
            animateTo:180,
            easing: $.easing.easeInOutElastic
            })
        }
    }
});

7.callback属性:[Function] 动画完成时执行的回调函数
例如
$(“#img”).rotate({bind:{
    click: function(){
        $(this).rotate({
            angle: 0,
            animateTo:180,
            callback: function(){ alert(1) }
            })
        }
    }
});8. getRotateAngle这个函数只是简单地返回旋转对象当前的角度。
例如:
$(“#img”).rotate({
    angle: 45,
    bind: {
        click : function(){
        alert($(this).getRotateAngle());
        }
    }
});9.stopRotate这个函数只是简单地停止正在进行的旋转动画。例如:
$(“#img”).rotate({
    bind: {
        click: function(){
            $(“#img”).rotate({
                angle: 0,
                animateTo: 180,
                duration: 6000
            });
        setTimeout(function(){
            $(“#img”).stopRotate();
            }, 1000);
        }
    }
});
全部回答
以中心竖轴线为基准旋转。
$(obj).rotate(30); //即正上向右偏转30度

你好!!
 
不知道你的那个jquery.rotate.js是什么版本了?
新版本的用法也不是很复杂,如下:$(function(){
    $("#rotate-img").click(function(){//click事件,每点击一次,顺时针旋转45°.
        //图片旋转,通过$.animate()方法
        $(this).animate({
            rotate:"+=45deg"  //为rotate属性赋值,注意:deg为角度单位
        },'slow');
    });
});
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
通利钣金烤漆地址在什么地方,想过去办事
没有人能替自己承担起生命的责任。我想知道面
PS3 山脊赛车8 何时上市
召开发标会的上一个流程是()。
新能源电动汽车平鲁店地址在哪,我要去那里办
企业白条是什么意思
石狮市太岳文化促进会这个地址在什么地方,我
兴旺汽配汽修地址在什么地方,想过去办事
苏中桥/励才路(路口)在什么地方啊,我要过去
为什么和对象吵架之后,看到他人都心痛!
“簷前新叶覆残花,席上余杯对早茶”“春泥秧
全球鹰汽车2S店(朔州平鲁区紫河路14)地址有知
爱情珠宝的男主角是谁演的
永和汽修厂(朔州平鲁区)地址在什么地方,想过
蚯蚓的呼吸要靠能分泌黏液、始终保持湿润的体
推荐资讯
【咎由自取】作茧自缚和咎由自取的差别,同义
顺欣广告文印怎么去啊,我要去那办事
下列原则中不属于卫生法基本原则的是A.保护社
路孔镇文化茶园地址在什么地方,我要处理点事
单层建筑物内设有局部楼层者,局部楼层层高在
直肠癌怎么检查
楷床的意思是什么啊?知道的请说下!
大板地是属于长安管的还是虎门管的
日本的Deonatulle殿堂级腋下止汗消臭石这款产
六蔽的意思是什么啊?知道的请说下!
牛联家便利店地址在什么地方,我要处理点事
华润万家便利超市(东局子二店T239)地址在什么
正方形一边上任一点到这个正方形两条对角线的
阴历怎么看 ?