仿Amazon.com菜单代码,JS代码库,德仔网

代码语言

代码分类

【JS】仿Amazon.com菜单

作者:Dezai.CN / 发布于2013/9/25/ 408


	<!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" />
	<title>Untitled Document</title>
	<script type="text/javascript">
	var w = 0;
	var h = 0;
	var mout;
	function emotion(){
	var oMenu = document.getElementById("menu");
	if(w <= 50){
	oMenu.style.display = "block";
	fnLarge();
	}
	else{
	fnSmall();
	}
	}
	function fnLarge(){
	var oMenu = document.getElementById("menu");
	if(w < 200){
	w += 50;
	h += 25;
	oMenu.style.width = w+"px";
	oMenu.style.height = h+"px";
	window.setTimeout("fnLarge()",10);
	}
	}
	function fnSmall(){
	var oMenu = document.getElementById("menu");
	if(w > 0){
	w -= 50;
	h -= 25;
	oMenu.style.width = w+"px";
	oMenu.style.height = h+"px";
	window.setTimeout("fnSmall()",5);
	}
	else{
	oMenu.style.display = "none";
	}
	}
	</script>
	<style type="text/css">
	body{
	text-align: center;
	}
	p{
	cursor: pointer;
	margin: 0;
	padding: 0;
	font-size: 24px;
	display: inline;
	}
	div a:link, div a:visited{
	color: #666;
	text-decoration: none;
	}
	div a:hover{
	color: #FF6600;
	text-decoration: underline;
	}
	div{
	border: 2px solid #666;
	background: #fff;
	margin: 5px auto;
	overflow: hidden;
	display: none;
	padding: 5px 10px;
	}
	ul,li{
	margin: 0;
	padding: 0;
	}
	li{
	list-style: none;
	}
	li.title{
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<p onclick="emotion();">hello, emotion!
	<div id="menu" onmouseout="javascript:mout=setTimeout('fnSmall()',1000);" onMouseOver="javascript:clearTimeout(mout);">
	<table border="0" cellspacing="0" cellpadding="0">
	<tr>
	<td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li></li>
	</ul></td>
	<td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li></ul></td>
	<td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li></ul></td>
	<td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li>
	</ul></td>
	</tr>
	</table>
	</div></body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　Amazon.com菜单　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)