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 相关文章推荐
javascript一些实用技巧小结
Mar 18 Javascript
JavaScript 数组详解
Oct 10 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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之第五天
2006/10/09 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python uuid模块使用实例
2015/04/08 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
pycharm实现猜数游戏
2020/12/07 Python
对标管理实施方案
2014/03/12 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
品牌推广策划方案
2014/05/28 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015毕业寄语大全
2015/02/26 职场文书
自我评价优缺点范文
2015/03/11 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS