名站技術分析 — tudou網首頁下列菜單的彈出效果

作者: BearRui(AK-47)  來源: 博客園  發布時間: 2010-11-08 21:32  閱讀: 901 次  推薦: 0   原文鏈接   [收藏]  
摘要：土豆(tudou.com)首頁的導航條,當鼠標移到到“社區”菜單時，對應的菜單的彈出效果比較有意思，類似于一個彈球落地的效果，對于有意思的東西，當然要研究研究。

　　土豆(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;
	}
});
0
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄