名站技术分析 — tudou网首页下列菜单的弹出效果

2021年1月12日   |   by tgcode

// <![CDATA[
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

  土豆(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默认定义了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)

  可以看出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 : "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) 

相关推荐: JavaScript,只有你想不到

  英文原文:http://radar.oreilly.com.cn/blog/2011/mikel/time-to-learn-javascript   译文原文:http://www.cn-cuckoo.com/2011/06/22/time-to-lea…