CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

2024-05-06 16:20:01

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法,设计javascript操作菜单的弹出与关闭的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法。分享给大家供大家参考。具体分析如下：

这里用CSS+JS实现点击文字后动画展开一个DIV层菜单，到期会自动关闭，是CSS结合JS实现的效果。

<!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>CSS+JS弹出DIV层</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;

width:70px;

}

li.title{

font-weight: bold;

}

</style>

</head>

<body>

<p onclick="emotion();">点击这行文字试试!</p>

<div id="menu"

onmouseout="javascript:mout=setTimeout('fnSmall()',2111);"

onMouseOver="javascript:clearTimeout(mout);">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="80" valign="top" align="left">

<ul>

<li class="title">ASP</li>

<li><a href="#" onclick="fnSmall();">新闻</a></li>

<li><a href="#" onclick="fnSmall();">论坛</a></li>

<li><a href="#" onclick="fnSmall();">CMS</a></li>

<li></li>

</ul></td>

<td width="80" valign="top" align="left">

<ul>

<li class="title">PHP</li>

<li><a href="#" onclick="fnSmall();">文章</a></li>

<li><a href="#" onclick="fnSmall();">聊天</a></li>

<li><a href="#" onclick="fnSmall();">插件</a></li>

<li><a href="#" onclick="fnSmall();">企业</a></li>

</ul>

</td>

<td width="80" valign="top" align="left">

<ul>

<li class="title">JSP</li>

<li><a href="#" onclick="fnSmall();">AJAX</a></li>

<li><a href="#" onclick="fnSmall();">JQUERY</a></li>

<li><a href="#" onclick="fnSmall();">MYSQL</a></li>

<li><a href="#" onclick="fnSmall();">JAVA</a></li>

</ul>

</td>

</tr>

</table>

</div>

</body>

</html>