名站技术分析 — tudou网首页下列菜单的弹出效果
2021年1月12日 | by tgcode
// <
},
easeOutBounce : function(o, p, n, r, q) {
if ((p /= q) < (1 / 2.75)) {
return r * (7.5625 * p * p) + n
} else {
if (p < (2 / 2.75)) {
return r * (7.5625 * (p -= (1.5 / 2.75)) * p + 0.75) + n
} else {
if (p
土豆(tudou.com)首页的导航条,当鼠标移到到“社区”菜单时,对应的菜单的弹出效果比较有意思,类似于一个弹球落地的效果,对于有意思的东西,当然要研究研究。有兴趣的朋友可以自己先去看看效果,然后再来看文章。
tudou代码
看了tudou的js代码,发现他们也是使用jquery来实现动画效果的,代码如下:
f.stgcodetyle.height=0; this.style.visibility="visible"; $(f).animate({height:g},500,"easeOutBounce"); $(i).addClass("hover")
最重要的是上面第三行代码,使用jquery的animate的函数,其中重点就是tudou自定义了animate的easing函数,即easeOutBounce函数,easeOutBounce函数如下。
easeOutBounce:function(o,p,n,r,q){ if((p/=q)
DEMO
先不分析代码,先用tudou的easeOutBounce函数做个demo看看效tgcode果。
demo(该demo在IE下点击没有效果,可能是跟博客园的其他代码有冲突,不想花时间去解决。要在IE下看效果,请copy后面的代码在本地进行测试):
代码:
jQuery.extend(jQuery.easing,{ def : "easeOutQuad", swing : function(o, p, n, r, q) { return jQuery.easing[jQuery.easing.def](o, p, n, r,q) }, easeOutBounce : function(o, p, n, r, q) { if ((p /= q) < (1 / 2.75)) { return r * (7.5625 * p * p) + n } else { if (p < (2 / 2.75)) { return r * (7.5625 * (p -= (1.5 / 2.75)) * p + 0.75) + n } else { if (p < (2.5 / 2.75)) { return r * (7.5625 * (p -= (2.25 / 2.75)) * p + 0.9375) + n } else { return r * (7.5625 * (p -= (2.625 / 2.75)) * p + 0.984375) + n } } } } }); function showMenu(){ resetMenu(); $("#b_menu").animate({height:100},500,"easeOutBounce"); } function resetMenu(){ $("#b_menu").show(); $("#b_menu").height(0); } #b_menu{border:1px solid #F56E0B;width:100px;list-style:none;padding:0;height:0;overflow:hidden;display:none;} #b_menu li{line-height:25px;width:100px;text-align:center;} 我的菜单
easing函数
jQuery.extend(jQuery.easing,{ def : "easeOutQuatgcoded", swing : function(o, p, n, r, q) { return jQuery.easing[jQuery.easing.def](o, p, n, r,q) }, easeInQuad : function(o, p, n, r, q) { return r * (p /= q) * p + n }, easeOutQuad : function(o, p, n, r, q) { return -r * (p /= q) * (p - 2) + n }, easeInOutQuad : function(o, p, n, r, q) { if ((p /= q / 2)
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js 代码
jQuery.extend( jQuery.easing,{ def: 'easeOutQuad', swing: function (x, t, b, c, d) { //alert(jQuery.easing.default); return jQuery.easing[jQuery.easing.def](x, t, b, c, d); }, easeInQuad: function (x, t, b, c, d) { return c*(t/=d)*t + b; }, easeOutQuad: function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }, easeInOutQuad: function (x, t, b, c, d) { if ((t/=d/2)
英文原文:http://radar.oreilly.com.cn/blog/2011/mikel/time-to-learn-javascript 译文原文:http://www.cn-cuckoo.com/2011/06/22/time-to-lea…