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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
javascript自执行函数
Feb 10 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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
实用函数3
2007/11/08 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
JS实现简单日历特效
2020/01/03 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
暑期社会实践学生的自我评价
2014/01/09 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
律政俏佳人观后感
2015/06/09 职场文书
运动会通讯稿100字
2015/07/20 职场文书
2019新员工心得体会
2019/06/25 职场文书
详解MySQL的半同步
2021/04/22 MySQL
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL