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

最新推荐文章于 2021-06-04 06:56:12 发布
最新推荐文章于 2021-06-04 06:56:12 发布
阅读量2.7k 收藏 1
点赞数
文章标签： div css javascript menu border class

<!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=gb2312" />
<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 οnclick="emotion();">点击这行文字试试!</p>
<div id="menu" οnmοuseοut="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="#" οnclick="fnSmall();">新闻

</a></li><li><a href="#" οnclick="fnSmall();">论坛</a></li><li><a href="#" οnclick="fnSmall

();">CMS</a></li><li></li>
</ul></td>
<td width="80" valign="top" align="left"><ul><li class="title">PHP</li><li><a href="#" οnclick="fnSmall();">文章

</a></li><li><a href="#" οnclick="fnSmall();">聊天</a></li><li><a href="#" οnclick="fnSmall();">插件

</a></li><li><a href="#" οnclick="fnSmall();">企业</a></li></ul></td>
<td width="80" valign="top" align="left"><ul><li class="title">JSP</li><li><a href="#" οnclick="fnSmall

();">AJAX</a></li><li><a href="#" οnclick="fnSmall();">JQUERY</a></li><li><a href="#" οnclick="fnSmall

();">MYSQL</a></li><li><a href="#" οnclick="fnSmall();">JAVA</a></li></ul></td>
</tr>
</table>
</div>
</body>
</html>

qtvb1987
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5点击弹出自动关闭消息提示框
11-24
html5点击弹出自动关闭消息提示框
前端js实现点击文字弹出小框
SoWhatWorld的博客
02-11 2360
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; ...
html 鼠标经过出现文字,CSS实现鼠标滑过文字弹出一段说明文字无JS代码
weixin_29028145的博客
06-04 1100
用css实现内容弹出，无js代码，下面代码直接拷贝了就可用，需要背景图的到下面的地址下载，谢谢！地址：http://download.csdn.net/detail/zurich1979/7229061先上效果图：1. 背景图，文字是自己添加的：2. 鼠标滑过后弹出文本框：代码如下：复制代码代码如下:第五代烤瓷牙-美牙冠-康贝佳口腔医院body{font-size:12px;}.popup a...
div+css+js实现菜单的收缩与展开
12-02
div+css+js实现菜单的收缩与展开
文字弹出窗口CSS特效
01-06
文字弹出窗口CSS特效
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
10-24
主要介绍了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法,设计javascript操作菜单的弹出与关闭的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
带关闭按钮jquery+div消息弹出层代码例子 14.推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数...
html+css网页设计作业.zip
最新发布
07-20
菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。 页面清爽、美观、大方，不雷同。 不仅要能够把用户要求的内容...
work(旅游).rar旅游网站静态页面，html+css，web课堂期末作品作业
02-21
4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻； 6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用； 7. 页面清爽、美观、大方，不雷同1. 页面分为页头...
终于可以在html上自动显示汉字拼音了
weixin_33971130的博客
05-21 1243
2019独角兽企业重金招聘Python工程师标准>>> ...
js实现ｈｔｍｌ页面显示时间的定时刷新
weixin_30369087的博客
01-25 480
１、在html文件中的设置： html代码 1 <STYLE type="text/css"> 2 <!-- 3 /*枠線なし*/ 4 INPUT { 5 font-size: 50px; 6 color: #CC0000; 7 border-style:none //设置样式：无边框的文本框 8 9 } 10...
vue自己写了一个div菜单，点击按钮展开，点击其他地方关闭这个div菜单
weixin_30826095的博客
04-18 1224
需求是通过点击body页面，在其他地方就关闭这个<div>菜单，给这个div一个id：problemList，但是点击我打开的按钮，不关闭。 created () { document.onclick = function () {　　// 要关闭的div的id (problemList) document.getElementById('problemList'...
HTML 之 定时器
有时想得太简单的博客
03-14 1万+
定时器 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;定时器&lt;/title&gt; &lt;style type="text/css&q
menudiv.php,CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
weixin_32049085的博客
03-18 148
本文实例讲述了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...
显示一个提示框，几秒后显示框自动消失
热门推荐
onebutterfly
06-13 4万+
问题：显示一个提示框，几秒后显示框自动消失 方案： 1.使用AlertView提示，但是使用AlertView提示后，需要点一个按钮才会消失。 此方案不行，因为提示框不会自动消失 2.向页面添加一个Label,然后使用延时函数，移除label //添加要用到的Label UILabel * label = [[UILabel alloc]initWithFrame:CGRectMa
jQuery实现点击弹出层3秒后自动消失
sunnyfan的博客
10-29 2万+
jQuery实现点击弹出层3秒后自动消失 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../reset.css"> <link rel="stylesheet" typ
html定时刷新
walton的博客
11-03 2372
在html的head部分加入这句，即可实现定时刷新（content="20"代表20秒刷新一次）
CSS+JS实现一个DIV层的展开折叠效果
04-19
可以使用jQuery来实现一个DIV层的展开折叠效果，具体代码如下： HTML代码： ```html <div class="wrapper"> <div class="header">点击我展开或收起内容</div> <div class="content">这是要展开或收起的内容</div...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值