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的一些看法
May 27 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
深入理解js中this的用法
May 28 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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
thinkphp模板继承实例简述
2014/11/26 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
js相册效果代码(点击创建即可)
2013/04/16 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
几种tab切换详解
2017/02/03 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
python检测服务器端口代码实例
2019/08/31 Python
python Selenium 库的使用技巧
2020/10/16 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
大家访活动实施方案
2014/03/10 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
参赛口号
2014/06/16 职场文书
组工干部演讲稿
2014/09/02 职场文书
党员个人总结范文
2015/02/14 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python