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


Posted in Javascript onMay 12, 2015

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

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

Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 #Javascript
js实现带按钮的上下滚动效果
May 12 #Javascript
js验证上传图片的方法
May 12 #Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 #Javascript
js实现一个链接打开两个链接地址的方法
May 12 #Javascript
js实现鼠标经过表格行变色的方法
May 12 #Javascript
js比较日期大小的方法
May 12 #Javascript
You might like
php操作SVN版本服务器类代码
2011/11/27 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
JS trim去空格的最佳实践
2011/10/30 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python书单 不将就
2017/07/11 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
新郎父亲婚宴答谢词
2014/01/11 职场文书
趣味运动会活动方案
2014/02/12 职场文书
收银员岗位职责
2015/02/03 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
关于幸福的感言
2015/08/03 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
python flask框架快速入门
2021/05/14 Python