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

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

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

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS+JS弹出DIV层

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

}

}

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;

}

点击这行文字试试!

οnmοuseοut="javascript:mout=setTimeout('fnSmall()',2111);"

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

ASP 新闻 论坛 CMS

PHP 文章 聊天 插件 企业

JSP AJAX JQUERY MYSQL JAVA

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