仿Amazon.com菜单效果的简单实现

分类 : 代码案例

仿Amazon.com菜单效果的简单实现


<!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!</p>

<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>


分类: 代码案例  发布: 2019-07-18-星期四   访问() .NET技术    Web前端    JAVA开发    语言编程    数据库    电脑知识    代码案例

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved