BearRui(AK-47)
花开有时，错过了一日便错过了一季，就象人生错过了相遇，就不再找寻到美丽的相聚
随笔- 39  文章- 2  评论- 1288 
博客园  首页  新随笔  联系  管理  订阅 订阅
名站技术分析 — tudou网首页下列菜单的弹出效果

　　土豆(tudou.com)首页的导航条,当鼠标移到到“社区”菜单时，对应的菜单的弹出效果比较有意思，类似于一个弹球落地的效果，对于有意思的东西，当然要研究研究。有兴趣的朋友可以自己先去看看效果，然后再来看文章。

 

tudou代码

   看了tudou的js代码，发现他们也是使用jquery来实现动画效果的，代码如下：

   f.style.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)<(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
			}
		}
	}
   }

 

DEMO
　　先不分析代码，先用tudou的easeOutBounce函数做个demo看看效果。
　　demo(该demo在IE下点击没有效果，可能是跟博客园的其他代码有冲突，不想花时间去解决。要在IE下看效果，请copy后面的代码在本地进行测试)：
  我的菜单(点击我)
  • 菜单一
  • 菜单二
  • 菜单三
  • 菜单四

 

    代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
	<script type="text/javascript">
	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);
	}
	</script>
	
	<style type="text/css">
		#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;}
	</style>		
	</head>
	<body>
	  <a href="javascript:showMenu();void(0)">我的菜单</a><br />
	  <ul id="b_menu">
	  	<li>菜单一</li>	
	  	<li>菜单二</li>	
	  	<li>菜单三</li>	
	  	<li>菜单四</li>	
	  </ul>		
  </body>		
</html>

 

 

easing函数
　　jquery默认定义了2个easing函数，分别是swing和linear,easing函数格式如下：function(o, p, n, r, q)
但对于该几个参数的具体说明，jquery官方也没有文档说明(不知道是否是我没有找到)，经过我看源代码和自己的理解，对几个参数理解如下：
o = p/q
p: 当前时间 - animate开始时间的毫秒值
n: 起始值，一直为0
r: 这个个人认为是递增值，一直为1
q: animate中的duration参数，即设置的动画效果运行完毕需要的时间
返回值：返回1个大于0，小于等于1的百分比值，animate方法通过这个百分比去计算各个参数的值
　　知道这几个参数的含义后，再看看tudou的easeOutBounce，就发现其第一行代码写的有问题，if ((p /= q) < (1 / 2.75)) 其实可以直接写成 if ((o) < (1 / 2.75)) 。
可以看出tudou的开发人员对easing函数的几个参数也不太理解，不然就不会这样写了(也有可能easeOutBounce函数，tudou也是直接从其他地方copy过来的，呵呵)

胡言乱语
　　在查询jquery的easing参数的时候，无意间发现1个专门做easing效果的网站(http://gsgd.co.uk/sandbox/jquery/easing/)，而土豆的几个easing效果代码跟该网站的easing效果代码是惊人的相似，除了参数名不同外(这也出现我前面copy 代码的猜测),其实是不是copy都无所谓的，偶也是胡言乱语下，大家也别想太多，贴出2段代码，大家自己看看吧。
下面tudou的代码：
jQuery.extend(jQuery.easing,{
	def : "easeOutQuad",
	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) < 1) {
			return r / 2 * p * p * p + n
		}
		return r / 2 * ((p -= 2) * p * p + 2) + n
	},
	easeInBack : function(o, p, n, u, r, q) {
		if (q == undefined) {
			q = 1.70158
		}
		return u * (p /= r) * p * ((q + 1) * p - q) + n
	},
	easeOutBack : function(o, p, n, u, r, q) {
		if (q == undefined) {
			q = 1.70158
		}
		return u * ((p = p / r - 1) * p * ((q + 1) * p + q) + 1) + n
	},
	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
				}
			}
		}
	}
});
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) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},
	easeInQuart: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	easeOutQuart: function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeInOutQuart: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	easeInQuint: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	},
	easeOutQuint: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},
	easeInOutQuint: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},
	easeInSine: function (x, t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},
	easeOutSine: function (x, t, b, c, d) {
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},
	easeInOutSine: function (x, t, b, c, d) {
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},
	easeInExpo: function (x, t, b, c, d) {
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},
	easeOutExpo: function (x, t, b, c, d) {
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	},
	easeInCirc: function (x, t, b, c, d) {
		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	},
	easeOutCirc: function (x, t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	},
	easeInOutCirc: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	},
	easeInElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	easeOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},
	easeInOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	},
	easeInBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	easeOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	},
	easeInOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158; 
		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	easeInBounce: function (x, t, b, c, d) {
		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
	},
	easeOutBounce: function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},
	easeInOutBounce: function (x, t, b, c, d) {
		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
});
相关链接
　　名站技术分析 — facebook奇特的页面加载技术
　　名站技术分析 - 浅谈tudou.com首页图片延迟加载的效果
[作者]：BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/
[声明]:本博所有文章版权归作者所有(除特殊说明以外)，转载请注明出处.
绿色通道：好文要顶关注我收藏该文与我联系
posted on 2010-07-02 08:40 BearRui(AK-47) 阅读(3930) 评论(14) 编辑 收藏
发表评论
1862639
　回复　引用　查看　  
#1楼 2010-07-02 09:20 | 89分      
have a look for Anzug nach maß
　回复　引用　查看　  
#2楼[楼主] 2010-07-02 09:28 | BearRui(AK-47)      
楼上的做广告的？？？
　回复　引用　查看　  
#3楼 2010-07-02 09:54 | szyicol      
不错哈，顺便请教一下，运行效果怎么发到文章中？

上次连搞附件都不会，寒一个。。


　回复　引用　查看　  
#4楼[楼主] 2010-07-02 09:56 | BearRui(AK-47)      
@szyicol
运行效果，就直接编辑html代码，把你的html代码copy进去就行啊，^_^
　回复　引用　查看　  
#5楼 2010-07-02 09:59 | szyicol      
连续快速点5次，停顿后再点第六次，就没效果了
　回复　引用　查看　  
#6楼 2010-07-02 10:01 | szyicol      
@BearRui(AK-47)

你不会是先自己在本地搞个html然后传上去的吧?
不过，我看到你的文章的文件名都不是随机生成的啊。
　回复　引用　查看　  
#7楼[楼主] 2010-07-02 10:14 | BearRui(AK-47)      
@szyicol

当然不是啊，就copy一部分代码就行，就比如上面的demo，只需要copy下面的代码放进博客园编辑器的html模式中就OK：
<script type="text/javascript">
jQuery.extend(jQuery.easing,{
....
</script>
<style type="text/css">
#b_menu{....
</style>
<a href="javascript:showMenu();void(0)">我的菜单</a><br />
<ul id="b_menu">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
　回复　引用　查看　  
#8楼 2010-07-02 10:14 | ruolinzhanyuan      
呵呵，我连续点了好多次之后再点就没效果了，鼠标移开之后再点才有反应
　回复　引用　查看　  
#9楼[楼主] 2010-07-02 10:15 | BearRui(AK-47)      
引用szyicol：连续快速点5次，停顿后再点第六次，就没效果了


恩，我这个demo做到比较简单，主要是体现下效果，会有些问题。
　回复　引用　查看　  
#10楼[楼主] 2010-07-02 10:16 | BearRui(AK-47)      
引用ruolinzhanyuan：呵呵，我连续点了好多次之后再点就没效果了，鼠标移开之后再点才有反应


建议直接copy代码在本地新建1个html文件进行测试，这样可能会好点，demo代码没有经过很好的测试，^_^
　回复　引用　查看　  
#11楼 2010-07-02 11:55 | BlueDream      
呵呵 用Tween算法 再加上jQuery 就更没技术含量了.
但楼主的文章很细致. 学习了.
　回复　引用　查看　  
#12楼[楼主] 2010-07-02 13:30 | BearRui(AK-47)      
@BlueDream
其实只要自己理解最深沉的算法，原理就可以了，使用jquery只是为了省事，方便，效率。
　回复　引用　查看　  
#13楼 2010-07-02 16:54 | mashihua      

Tween核心的参数还是time,begin,change,duration，JQ前面加上o是不是多此一举呢？没看源码的说，你懂的。
　回复　引用　查看　  
#14楼[楼主] 2010-07-02 17:15 | BearRui(AK-47)      
引用mashihua：
Tween核心的参数还是time,begin,change,duration，JQ前面加上o是不是多此一举呢？没看源码的说，你懂的。


可能是jq看time/duration 用的比较多，所以就先算好o=time/duration,传递进来，其实我也是看了源码后才知道o=time/duration的，呵呵。
刷新评论列表  刷新页面  返回页首
发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

验证码： 验证码 看不清，换一个

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1769591 79EHS42uMtY=
首页博问闪存新闻园子招聘知识库
最新IT新闻:
· 苹果第三名创始人：当年离开苹果因前景不明
· 报告称Android广告印象份额同比增长504%
· 百度高管称正调研东南亚市场 未来或建分公司
· 东芝索尼获得日本国有银行逾十亿美元贷款
· Getjar发布Android虚拟支付系统
» 更多新闻...
最新知识库文章:
· 编程的艺术：漂亮的代码和漂亮的软件
· GIT分支管理是一门艺术
· 编程：是一门艺术
· 编程是一门艺术吗？
· 对Java初学者的忠告
» 更多知识库文章...

China-pub 2011秋季教材巡展
China-Pub 计算机绝版图书按需印刷服务

抓虾
google reader
鲜果
哪吒
QQ邮箱
http://wap.feedsky.com/BearRui
昵称：BearRui(AK-47)
园龄：5年10个月
荣誉：推荐博客
粉丝：127
关注：3

搜索

 

最新随笔

  • 1. 产生唯一随机码的方法分析。
  • 2. URL中允许携带sessionid带来的安全隐患。
  • 3. JS 实现完美include
  • 4. 基于模板的excel导出
  • 5. 实现if elseif else的jsp标签。
  • 6. 记一复杂页面的前端优化(2) - 其他优化
  • 7. 记一复杂页面的前端优化(1) - 不一样的延迟加载
  • 8. 名站技术分析 — tudou网首页下列菜单的弹出效果
  • 9. LESS 让css也支持变量，运算符，include,嵌套规则等等
  • 10. CSS技巧 — 不使用图片实现圆角、阴影、渐变等功能

随笔分类(38)

  • .NET(11)
  • CSS(3)
  • JAVA(2)
  • javascript(4)
  • Life(5)
  • WEB(4)
  • 高性能WEB开发(5)
  • 浏览器(1)
  • 名站技术分析(3)

随笔档案(39)

  • 2010年10月 (1)
  • 2010年8月 (3)
  • 2010年7月 (5)
  • 2010年6月 (4)
  • 2010年5月 (6)
  • 2006年6月 (4)
  • 2006年5月 (7)
  • 2006年4月 (9)

积分与排名

  • 积分 - 178246
  • 排名 - 484

最新评论

阅读排行榜

评论排行榜

推荐排行榜

Copyright ©2012 BearRui(AK-47)