阿里妈妈网站顶部滑出的banner工具条代码，带关闭功能

2024-09-05 12:20:45

字体：大中小

来源：转载

供稿：网友

阿里妈妈网站顶部banner代码，采用滑出的方式，一个经典的工具条代码，可以当作菜单来用，同时还有完善的功能，可以适时关闭工具条，整体效果设计美观，简洁漂亮。

<!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><title>阿里妈妈网站顶部banner代码</title><style>body{margin:0px;padding:0px}.home_tx {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/jscss/demoimg/201011/hometx_03.gif); PADDING-BOTTOM: 0px; MARGIN: auto; OVERFLOW: hidden; WIDTH: 950px; PADDING-TOP: 0px}.home_tx IMG {BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px}.home_tx DL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 10px 0px 0px; WIDTH: 61px; PADDING-TOP: 0px; HEIGHT: 37px}.home_tx SPAN {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 830px; COLOR: #333333; LINE-HEIGHT: 34px; PADDING-TOP: 0px; HEIGHT: 37px; TEXT-ALIGN: left}.home_tx SPAN B {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #990000; PADDING-TOP: 0px}.home_tx A {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 35px; PADDING-TOP: 0px; HEIGHT: 37px}</style></head><body><DIV id=home_tx style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: auto; OVERFLOW: hidden; WIDTH: 950px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 1px"><DIV class=home_tx id=home_tx_in style="POSITION: absolute; TOP: -37px; HEIGHT: 37px" align=center><DL><IMG src="/d/file/p/2024/09-05/d4b31bca1b527d08c424f2432345aede.gif"></DL><SPAN><B>武林网提供各类编程源码、书籍教程、JavaScript/CSS特效代码，并奉献常用的软件下载等，一个以学习为主的编程资源下载站。</B> 　　详情>></SPAN> <IMG src="/d/file/p/2024/09-05/086591cccd72a21b4d65718d57b29eb7.gif"> </DIV></DIV><script>var is_home_tx_show = false;var div_home_tx = document.getElementById("home_tx");var div_home_tx_in = document.getElementById("home_tx_in");var stepms = 10;function home_tx_show(){	home_tx_stepshow();}function home_tx_stepshow(){	var curHeight = parseInt(div_home_tx.offsetHeight);	if(curHeight>=37){		is_home_tx_show = true;	}else{		div_home_tx.style.height = (curHeight + 4) + "px";		div_home_tx_in.style.top = (parseInt(div_home_tx_in.style.top)+4)+"px";		window.setTimeout(home_tx_stepshow,30);	}}function home_tx_hide(){	if(is_home_tx_show){		home_tx_stephide()	}else{		window.setTimeout(home_tx_stephide,1200);	}}function home_tx_stephide(){	var curHeight = parseInt(div_home_tx.style.height);	if(curHeight<=0){		is_home_tx_show = false;	}else{		try{			div_home_tx.style.height = (curHeight - 4) + "px";    		div_home_tx_in.style.top = (parseInt(div_home_tx_in.style.top)-4)+"px";    		window.setTimeout(home_tx_stephide,30);		} catch(e) {}	}}if(window.addEventListener){	window.addEventListener("load",home_tx_show,false);}else{	window.attachEvent("onload",home_tx_show);}</script></body></html>

上一篇：再发一个仿Flash的jquery滑动菜单，横向

下一篇：jQuery 个性翻牌效果的导航菜单