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

更新时间：2026-02-18 19:45:25作者：zhao

本文实例讲述了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">

<head>

<title>CSS+JS弹出DIV层</title>

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>

body{

text-align: center;

}

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);">

<tr>

<ul>

</ul></td>

<ul>

</ul>

</td>

<ul>

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

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

</ul>

</td>

</tr>

</table>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。