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 相关文章推荐
一句话JavaScript表单验证代码
Aug 02 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
jquery预加载图片的方法
May 27 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
jQuery原生的动画效果
Jul 10 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python 的AES加密与解密实现
2019/07/09 Python
python requests使用socks5的例子
2019/07/25 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
2014年体育教师工作总结
2014/12/03 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang