点击对象弹出DIV层菜单可以定时自动关闭

最新推荐文章于 2022-04-29 16:59:21 发布
最新推荐文章于 2022-04-29 16:59:21 发布
阅读量2.6k 收藏
点赞数
分类专栏： jQuery例子大全 文章标签： div javascript menu border class function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zth603/article/details/5840605
版权

<!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>点击对象弹出DIV层菜单可以定时自动关闭_懒人建站收集整理-JS代码|网页图标|网页欣赏模板|SEO优化服务</title>
<meta name="keywords" content="导航菜单,焦点图片,网页特效,广告代码,SEO优化,建站技巧" />
<meta name="description" content="懒人建站只收录实用和能提高用户体验的代码，我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑；我们为您提供-JS代码，网页图标，网页欣赏模板，SEO优化和各种建站技巧。" />


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


<!--下面只是说明与程序代码无关-->
<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<br>
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a>
<a href="http://www.51xuediannao.com">懒人建站 == 我要学电脑</a>
</div>
</body>
</html>

zth603
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现定时自动关闭DIV层提示框的方法
01-19
本文实例讲述了JS实现定时自动关闭DIV层提示框的方法。分享给大家供大家参考。具体分析如下： 这里用JS设定时间去控制指定ID的DIV层是否显示，可以实现一个自动关闭的提示框，时间一到，马上关闭，这样会使你的网页更人性一点，代码其实比你想像的还要简单，就一行代码。 <title>自动关闭的DIV层</title> <body onLoad=setTimeout(abc.style.display='none',5000)> <div id=abc style=background:yellow;padding:20px; position:absolute; left:92px;
定时关闭弹出层
kevin
01-06 991
层弹出代码#sponsorAdDiv {position:absolute; height:1; width:1; top:0; left:0;}-->adTime=5; chanceAd=1;var ns=(document.layers);var ie=(document.all);var w3=(document.getElementById  &&  !ie);adCount=0;fu
弹出div上点击按钮div会自动隐藏问题，已解决
ljj2312的专栏
09-06 1094
New Document              .divclass{ width:300px; height:100px; background-color:red; display:none; }     //显示div function tanchuDiv(){ $("#divId").show(10); } //将aaa动
<title>自动关闭的DIV层</title>
dibodang1423的博客
03-14 84
<title>自动关闭的DIV层</title><script language="javascript">function timer(){ var box=document.getElementById("abc"); box.style.display="none";}setTimeout("timer()",6000);//6秒后消失&lt...
CSS+JS实现点击文字弹出定时自动关闭的DIV层菜单
qtvb1987的专栏
01-12 2732
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">CSS+JS弹出DIV层var w = 0;var h = 0;var mout;function emotion(){var oMenu = document.getElementById("menu");if(w oM
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
10-24
主要介绍了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法,设计javascript操作菜单的弹出与关闭的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
CSS+DIV 菜单控制
07-04
以上就是基于CSS+DIV菜单控制的一些关键知识点，通过学习和实践这些技术，可以极大地提升网页的交互性和用户体验。不过，要记住，良好的用户体验不仅仅是技术的堆砌，更重要的是理解和满足用户的需求。
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
带关闭按钮jquery+div消息弹出层代码例子 14.推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数...
实用的层滑开js实现代码
10-29
这种效果通常用于隐藏和显示信息，比如下拉菜单、弹出框或者提示信息等。本文将详细介绍如何使用JavaScript实现一个实用的层滑开特效，并探讨相关的核心知识点。 首先，我们要理解JavaScript的基本原理。JavaScript...
可自动关闭的div 提示框
猎人在吃肉
03-24 413
可自动关闭的div 提示框     &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;自动关闭的div 提示框&lt;/title&gt; &lt;/head&gt; &lt;body onLoa
自定义定时器 自动关闭弹出框
u010614385的专栏
08-12 1347
//自定义定时器 15秒后退出程序弹出框自动关闭          final Timer t = new Timer();          t.schedule(new TimerTask(){                     @Override                     public void run() {                          
HTML+JS实现页面自动跳转并且定时关闭
qq_40955428的博客
04-29 585
htm+js页面自动跳转并关闭 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv=Content-Type content="text/html; charset=GB2312"> <title>自动访问</title> <style type="text/css"> .container { position:relativ
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
jquery 弹出提示div 等待2秒自动关闭
qq_29596627的博客
11-29 2532
var tishi={   m_tishi :null,//全局变量 判断是否存在div,    //提示div 等待2秒自动关闭     Funtishi: function (content, url) {         if (HuiFang.m_tishi == null) {             HuiFang.m_tishi = ' <p class="app_
js实现div显示2秒后自动消失
那么多的人，你要去哪里
02-25 1万+
前言在做四象限的过程中会有提示的信息，但是想让提示信息在一定的时间后自动隐藏。如上图，2s后提示自动隐藏，怎么做呢？正文利用setTimeout()，setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。语法setTimeout（code,millisec）提示和注释setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 cod...
js实现一个div弹窗附带定时关闭
x1562092008的博客
11-18 1404
因为js自带的alert弹窗太丑且需要用户点击后才能关闭，所以用js+div实现一个弹窗,且附带定时关闭功能 代码如下： style样式： /*背景层*/ #popLayer { display: none; background-color: #B3B3B3; position: absolute;...
简单的计时器
一岁一枯荣的博客
10-10 200
var i = 0; var start; window.onload = function(){ document.getElementById("btn").onclick = function(){ //创建计时器，在指定周期内循环执行 start = setInterval("addTime()",1000); } document.getElementB
点击div实现弹出层效果
最新发布
06-10
可以通过CSS和JavaScript实现点击div弹出层的效果，具体步骤如下： HTML部分： ```html <div id="myDiv">Click me!</div> <div class="overlay" id="overlay"> <div class="popup" id="popup"> <p>Hello, world!</p> <button id="close-btn">Close</button> </div> </div> ``` CSS部分： ```css .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; display: none; } .popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: white; border: 1px solid black; padding: 20px; } ``` JavaScript部分： ```javascript var myDiv = document.getElementById("myDiv"); var overlay = document.getElementById("overlay"); var popup = document.getElementById("popup"); var closeBtn = document.getElementById("close-btn"); myDiv.onclick = function() { overlay.style.display = "block"; } closeBtn.onclick = function() { overlay.style.display = "none"; } ``` 这样，当点击myDiv元素时，就会弹出一个id为popup的元素，并在其中显示文字“Hello, world!”，同时覆盖整个页面的遮罩层会出现，点击遮罩层上的关闭按钮或遮罩层本身时弹窗会消失。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值