欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jQuery中的线性、渐进、曲线、摆动运动效果插件

美国ST机房 添加于 2012-09-02  
jquery教程

在jQuery 1.4.2中默认提供了提供了两种动画运动效果, 线性和摆动运动:
jQuery.extend({
……
easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff *p;
},
swing: function( p, n, firstNum, diff ){
return((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
},
……
});
但当我们需要复杂一些的运动效果时,如让元件按照双曲线、或抛物线运动趋势运动时,就显得不够了。
此时只需要添加一个自定义的easing函数即可。
关于他的数学原理,可参考此文:http://www.robertpenner.com/easing/penner_chapter7_tweening.pdf
一般都是些数学函数,且最少需要如下参数:t:time, b:begin, c:change, d:duration
如要实例 y = x^4 的趋势运动,
jQuery中的线性、渐进、曲线、摆动运动效果插件
加上修正参数:y = c*x^4 + b;
因为 x= t/d;
则公式为: y = c*(t/d)^4 + b;可以看出在jQuery中的第一个参数p相当于t/d即x,这里可以忽略,
则最终公式为:
jQuery.easing['easeInQuint']= function(p, t, b, c, d) {
return c * Math.pow (t/d, 4) +b;
};
如应用到slideup效果上:
$(element).slideUp({ duration: 1000,easing: "easeInQuint", complete:callback});
有一个jQuery插件把很多常用的动画效果公式都列出来了,可以查看:http://gsgd.co.uk/sandbox/jquery/easing/
同时还可以应用到其他jQuery插件上,如jcarousel的弹簧动画效果:
http://sorgalla.com/projects/jcarousel/examples/special_easing.html

零度科技原文链接:http://www.ldisp.com/a/jquery/2012/1311.shtml

上一篇:jquery.chosen 强大的jquery模拟下拉框(select)插件
下一篇:jquery.validate和onsubmit 同时使用的方法

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

262

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理