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>