JS延时提示框实现方法详解
本文实例讲述了JS延时提示框实现方法。分享给大家供大家参考,具体如下:
提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失。
实现功能思路:
1、获取元素。
2、当鼠标指向Div1时,Div2显示。
3、当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2。
4、当鼠标指向Div2时,Div2显示。因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTimeout清除了就可以实现Div2显示了。
5、当鼠标离开Div2时,使Div2延迟0.5秒消失,这样以便有时间把鼠标指向Div1。
6、第2步已经设置了鼠标指向Div1,Div2就显示,但由于第5步设置setTimeout使Div2消失,所以在第2步加上clearTimeout()把setTimeout清除了就可以实现Div2显示了。
JS代码:
<script> window.onload=function() { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); time=null; oDiv1.onmouseover=function() { clearTimeout(time); oDiv2.style.display='block'; }; oDiv1.onmouseout=function() { time=setTimeout(function(){ oDiv2.style.display='none'; },500); }; oDiv2.onmouseover=function() { clearTimeout(time); }; oDiv2.onmouseout=function() { time=setTimeout(function(){ oDiv2.style.display='none'; },500); }; }; </script>
由于代码看起来多差不多,可以简化如下:
<script> window.onload=function() { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); time=null; oDiv2.onmouseover=oDiv1.onmouseover=function() { clearTimeout(time); oDiv2.style.display='block'; }; oDiv2.onmouseout=oDiv1.onmouseout=function() { time=setTimeout(function(){ oDiv2.style.display='none'; },500); }; }; </script>
HTML、CSS代码:
<div id="div1"></div> <div id="div2"></div> <style> #div1{float:left;margin-right:10px;width:50px;height:50px;background:black;} #div2{display:none;float:left;width:200px;height:200px;background:#0CF;} </style>
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript实现延时显示提示框效果
js延时提示框效果演示: 实现方法 移入显示,移出隐藏 移除延时隐藏,可以实现从第一个div移入第二个div,仍然可以显示 <!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/x
-
javascript实现延时显示提示框特效代码
本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法.分享给大家供大家参考.具体如下: 先给大家展示一个延迟/定时/强制弹出窗口的JS代码 参数解释: 设置时间:Then.setTime(Then.getTime() + 1*60*60*1000) mylove/ttan.htm(过渡网页) ttan.htm中的 http://弹出网页/ 是要弹出的网页 scroll:1(滚动条) status:1(状态栏) help:1(帮助按钮) toolbar=1(工具栏)
-
JS延时器提示框的应用实例代码解析
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时显示提示框</title> <style> #div1 { float: left; width: 60px; height: 60px; background-color: aqua;
-
JS延时提示框实现方法详解
本文实例讲述了JS延时提示框实现方法.分享给大家供大家参考,具体如下: 提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失. 实现功能思路: 1.获取元素. 2.当鼠标指向Div1时,Div2显示. 3.当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2. 4.当鼠标指向Div2时,Div2显示.因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTi
-
解决plsql连接失败,弹出空白提示框的方法详解
解决办法:1.win7下以管理员权限运行 2.修改时区 需要文件(前半部分路劲可能不同,以自己的安装路径为准):a:D:\oracle\product\10.2.0\db_1\WJLMGQS-PC_WJLMGQS\sysman\config\emd.propertiesb:D:\oracle\product\10.2.0\db_1\sysman\config\emd.propertiesc:D:\oracle\product\10.2.0\db_1\sysman\admin\supportedt
-
c#消息提示框messagebox的详解及使用
C#消息提示框messagebox的详解及使用 消息对话框是用messagebox对象的show方法显示的.MessageBox对象是命名空间System.Windows.Forms的一部分,Show是一个静态方法,意思是说,不需要基于MessageBox类的对象创建实例,就可以使用该方法.而且该方法是可以重载的,即方法可以有不同的参数列表形式. 返回结果:DialogResult dr1=MessageBox.Show(text,caption,buttons,icon,defaultbutt
-
原生js封装的一些jquery方法(详解)
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl
-
基于js对象,操作属性、方法详解
一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很
-
D3.js实现折线图的方法详解
前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>
-
js控制文本框禁止输入特殊字符详解
在开发难免遇到一些前端需要验证输入的数据是否合法的问题,收集分享在这里同学们使用,欢迎补充. 1.标签上直接替换方法: JS 控制不能输入特殊字符 <input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')": this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')
-
js显示动态时间的方法详解
本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的
-
JS创建Tag标签的方法详解
本文实例讲述了JS创建Tag标签的方法.分享给大家供大家参考,具体如下: 一 . 创建标签其原理就是 创建一个节点: var x = document.createElement("TagName") 赋予节点样式: x.setAttribute("class",类名) 对节点进行赋值: x.innerHTML = 内容 //赋值 添加节点到父元素 要添加到的元素.appendChild(x); 二. 样式图: 三. 主要代码流程: HTML部分: <div
-
JS原型对象的创建方法详解
本文实例讲述了JS原型对象的创建方法.分享给大家供大家参考,具体如下: 使用js的prototype属性的时候,创建对象的方式是存在优先级的 1.如果方法中存在构造方法就先使用方法中的构造方法 2.如果方法中不存在构造方法则继续查找prototype原型的构造方法 <html> <head> <TITLE>class_obj_js_class</TITLE> <script language=javaScript> function a(name
随机推荐
- go语言里包的用法实例
- Java基础 Servlet监听器详解
- Adapter适配器模式在JavaScript设计模式编程中的运用分析
- PHP Session 变量的使用方法详解与实例代码
- PHP 分页类(模仿google)-面试题目解答
- JavaScript Array对象扩展indexOf()方法
- Python with的用法
- 基于python的Tkinter实现一个简易计算器
- C# 创建文本文件写入读取实现代码
- 浅谈s:select 标签中list存放map对象的使用
- 获取中文字符串的实际长度代码
- javascript图片预加载实例分析
- python中dir函数用法分析
- Java ArrayList的不同排序方法
- PHP APC的安装与使用详解
- C#中string用法实例详解
- 浅析PHP数据导出知识点
- Java编程实现计算两个日期的月份差实例代码
- python解决pandas处理缺失值为空字符串的问题
- 小程序rich-text组件如何改变内部img图片样式的方法
其他
- shell脚本将mysql数据分页放入多个文件
- 父组件的data和组件的props
- jDK8 list多个相同字段求和
- python修改excel文件
- sql结果集 横向拼接 字段都不同
- tocken放redis退出后如何操作
- 为什么vue2.0 不能监听数组,对象的删除、新增等操作
- mybaits-plus 批量插入方法
- axios 保持长链接
- table 隐藏右侧滚动条
- router.beforeEach是怎么用的
- easyUI 进度条 后台
- vue3路由守卫使用store
- jprofiler11 教程
- select angularjs 数字
- JS 微博发布的本地存储版本
- springboor shiro 动态授权url
- react实现轮播图
- unity动态添加事件
- 易语言如何做一个打开文件对话框