JS延时提示框实现方法详解


Posted in Javascript onNovember 26, 2015

本文实例讲述了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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
js实现简单放大镜效果
Mar 07 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
js使用cookie记录用户名的方法
Nov 26 #Javascript
Bootstrap每天必学之导航
Nov 26 #Javascript
js过滤HTML标签完整实例
Nov 26 #Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 #Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 #Javascript
Bootstrap每天必学之按钮
Nov 26 #Javascript
学习JavaScript设计模式(多态)
Nov 25 #Javascript
You might like
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
解析strtr函数的效率问题
2013/06/26 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python3.x中自定义比较函数
2015/04/24 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python实现图片压缩代码实例
2019/08/12 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Django 再谈一谈json序列化
2020/03/16 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
网络体系结构及协议的定义
2014/03/13 面试题
工作自我评价怎么写
2014/01/29 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python