<html>
<head>
<title>淘宝网</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
@import url("http://www.taobao.com/home/css/sys/frontpage_v2.css?t=20070711.css");
</style>
<script src="http://www.taobao.com/home/js/tbra/yui-utilities.js?v=2.2.2.js" type="text/javascript"></script>
</head>
<body>
<div id="BraPanel">
<ul>
<li>
<a href="http://list.taobao.com/browse/cat-99.htm?from=head" target="_blank" id="GamecardTrigger" rel="GamecardPortal">游戏点卡</a>
</li>
<li>
<a href="http://list.taobao.com/browse/cat-50004958.htm?from=head" target="_blank" id="RechargeTrigger" rel="RechargePortal">手机充值</a>
</li>
</ul>
<div id="GamecardPortal" class="Portal Left">
<iframe src="about:blank" longdesc="http://auction1.taobao.com/auction/auto/game_auto.htm?viewstyle=150x150&at_iframe=1" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
</div>
<div id="RechargePortal" class="Portal Right">
<iframe src="about:blank" longdesc="http://auction1.taobao.com/auction/auto/mobile_auto_all.htm?viewstyle=150&at_iframe=1" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
</div>
<ul>
<li>
<a href="http://jipiao.taobao.com" target="_blank" id="ETTrigger" rel="ETPortal">机 票</a>
</li>
<li class="Current">
<a href="http://www.taobao.com/vertical/lottery/index.php?from=head" target="_blank" id="LotteryTrigger" rel="LotteryPortal">彩 票</a>
</li>
</ul>
<div id="ETPortal" class="Portal Left">
<iframe src="about:blank" longdesc="http://www.taobao.com/inc/portals/et_index.php" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
</div>
<div id="LotteryPortal" class="Portal Right">
<iframe src="about:blank" longdesc="http://www.taobao.com/inc/portals/lottery_index.php" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
</div>
</div>
<script type="text/javascript">
var BraPanel = (function() {
var YUD = YAHOO.util.Dom, YUE = YAHOO.util.Event ;
var currentHook, dropTimeId, dropTimeout=300, dropHeight=173;
var loadPortal = function(iframe) {
if (iframe.src == ’about:blank’) {
iframe.src = iframe.getAttribute(’longdesc’);
}
}
var dropAnim = function(panel) {
YUD.setStyle(panel, ’height’, 0);
YUD.setStyle(panel, ’display’, ’block’);
var anim = new YAHOO.util.Anim(panel, { height: {from: 0, to: dropHeight} }, 0.3);
var iframe = panel.getElementsByTagName(’iframe’)[0];
anim.onStart.subscribe(function() {
loadPortal(iframe);
YUD.setStyle(iframe, ’visibility’, ’hidden’);
})
anim.onComplete.subscribe(function() {
YUD.setStyle(iframe, ’visibility’, ’visible’);
});
anim.animate();
};
var drop = function() {
var rel = YUD.get(this.getAttribute(’rel’));
if (currentHook) {
var curRel = YUD.get(currentHook.getAttribute(’rel’));
var rel = YUD.get(this.getAttribute(’rel’));
if (this.parentNode.parentNode != currentHook.parentNode.parentNode) {
var drawAnim = new YAHOO.util.Anim(curRel, { height: {from:dropHeight, to: 0} }, 0.15);
var cp = currentHook.parentNode;
drawAnim.onComplete.subscribe(function() {
YUD.removeClass(cp, ’Current’);
YUD.setStyle(curRel, ’display’, ’none’);
YUD.setStyle(curRel, ’height’, dropHeight + ’px’);
});
drawAnim.animate();
YUD.addClass(this.parentNode, ’Current’);
dropAnim(rel);
} else {
YUD.removeClass(currentHook.parentNode, ’Current’);
YUD.addClass(this.parentNode, ’Current’);
YUD.setStyle(curRel, ’display’, ’none’);
YUD.setStyle(rel, ’display’, ’block’);
YUD.setStyle(rel, ’height’, dropHeight + ’px’);
var iframe = rel.getElementsByTagName(’iframe’)[0];
loadPortal(iframe);
}
} else {
YUD.addClass(this.parentNode, ’Current’);
dropAnim(rel);
}
currentHook = this;
}
var delayDrop = function() {
cancelDrop();
var hook = this;
dropTimeId = setTimeout(function() {
drop.call(hook);
}, dropTimeout);
}
var cancelDrop = function() {
clearTimeout(dropTimeId);
}
return {
init: function() {
var bp = YUD.get(’BraPanel’);
try {
currentHook = YUD.getElementsByClassName(’Current’, ’li’, bp)[0].getElementsByTagName(’a’)[0];
if (currentHook) {
rel = YUD.get(currentHook.getAttribute(’rel’));
YUD.setStyle(rel, ’display’, ’block’);
var iframe = rel.getElementsByTagName(’iframe’)[0];
loadPortal(iframe);
}
} catch (e){}
var hooks = bp.getElementsByTagName(’a’);
for (var i = 0; i < hooks.length; i++) {
YUE.on(hooks[i], ’mouseover’, delayDrop);
YUE.on(hooks[i], ’mouseout’, cancelDrop);
}
}
};
})();
BraPanel.init();
</script>
</body>
</html>
