[练习]菜单滑动效果兼容 ie ff opera

最新推荐文章于 2019-07-16 21:08:00 发布

pcduron

最新推荐文章于 2019-07-16 21:08:00 发布

阅读量330

点赞数

文章标签： opera ie div float function border

本文链接：https://blog.csdn.net/pcduron/article/details/4437452

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="keywords" content="关键字描述" />
<meta name="description" content="站点描述" />
<meta name="author" content="顾振宇,zy.e@163.com" />
<meta name="copyright" content="版权所有" />
<link rel="shortcut icon" href="/favicon.ico" mce_href="favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="/favicon.ico" mce_href="favicon.ico" type="image/x-icon" />
<title></title>
<mce:style type="text/css"><!--
*{margin:0;padding:0;}
img{border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
.br{ word-break: break-all; word-wrap: break-word;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:underline; }



#nav {width:200px;}
#nav .show{height:auto;}
.none{display:none;}
.nav h2{width:200px; height: 20px; line-height: 20px; background:#dde8f2; font-size: 12px;  float: left; cursor: pointer; text-align: center;}
.nav div{width:200px;background:#fffff0; font-size: 12px; height:0;float: left;line-height: 22px;margin-bottom:1px; overflow: hidden; }
--></mce:style><style type="text/css" mce_bogus="1">*{margin:0;padding:0;}
img{border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
.br{ word-break: break-all; word-wrap: break-word;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:underline; }



#nav {width:200px;}
#nav .show{height:auto;}
.none{display:none;}
.nav h2{width:200px; height: 20px; line-height: 20px; background:#dde8f2; font-size: 12px;  float: left; cursor: pointer; text-align: center;}
.nav div{width:200px;background:#fffff0; font-size: 12px; height:0;float: left;line-height: 22px;margin-bottom:1px; overflow: hidden; }</style>
</head>
<body>
<div id="nav" class="nav">
<h2>菜 单 A</h2>
<div>123<br/>1234<br/></div>
<h2>菜 单 B</h2>
<div>234<br/>2345<br/>23467<br/></div>
<h2>菜 单 C</h2>
<div>345<br/>3456<br/>34567<br/>345678<br/></div>
</div>


<script type="text/javascript"><!--
var menu = document.getElementById("nav");
var h2 = menu.getElementsByTagName("h2");
var div = menu.getElementsByTagName("div");
for(i = 0; i < h2.length; i++)
	{ 
		h2[i].num = i;
		h2[i].onclick = show;
	}

	function show()
	{
		for(i = 0; i < div.length; i++)
		{	
			div[this.num].className = "show";
			var x_max = div[this.num].offsetHeight;
			div[this.num].className = "";
			var x = 0;
			var y = x_max;
			var z = this.num;
		}
		
		var x = div[this.num].offsetHeight;
		
/*		alert(x)
		alert(x_max)*/

		if(x == x_max)
		{var ssb = setInterval(outshow,10);}
		else
		{var ssa = setInterval(slowshow,10);}

		function slowshow()
		{	
			x+= 2;
			div[z].style.height = x + "px";
			if(x == x_max)
			{clearInterval(ssa);}
		}

		function outshow()
        {    
            x = div[z].offsetHeight;
            x-= 2;
            if(x < 1)
            {
                clearInterval(ssb);
                div[z].style.height = "";
            }
				else
				{
                div[z].style.height = x + "px";
            }
        }


	}
// --></script>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]