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>

补充:还有jquery的一些hide(),show()函数都可以直接带数字1或几来表示称了,非常的好用又简单。

时间: 2024-09-20 19:04:22

JS实现延时弹出提示框代码的相关文章

div+js实现alert弹出提示框效果

首先,我们用js写一个重构Alert提示框的NewAlertBox()函数,重要的地方小拼都加了注释,应该好懂吧?弹窗代码如下:  代码如下 复制代码 /*  js弹窗代码:用户体验极佳的Alert提示效果  pubdate:2011-05-26 10:15  e-mail:xpsem2010@gmail.com  source:小拼SEM博客 */ //获取指定ID的元素 function $xp(id) {  return document.getElementById(id); } //通

jquery右下角弹出提示框示例代码_jquery

复制代码 代码如下: <!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/xhtml"> <head> <meta http-equiv=&qu

js右下角弹出提示框示例代码_javascript技巧

本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>网页右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px;

页面右下角弹出提示框示例代码js版

右下角弹出提示框想必大家不会陌生吧,本文简单的为大家实现一个,具体代码如下,有需求的朋友可以参考下   复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+&qu

JS+CSS实现可拖动的弹出提示框

 这篇文章主要介绍了JS+CSS实现可拖动的弹出提示框,涉及针对鼠标事件及html元素的操作技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

JS+CSS实现可拖动的弹出提示框_javascript技巧

本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xhtml&

JS实现刷新父页面不弹出提示框的方法_javascript技巧

本文实例讲述了JS实现刷新父页面不弹出提示框的方法.分享给大家供大家参考,具体如下: A页面 open方式出 B页面 ,当B页面做了类如保存动作后,需要关闭B页面,刷新A页面的情况下,会弹出一个提示框,要求点重试,这个就是发生预料之外的情况,用户体验很差. 解决方案分两种情况: 1.A页面很简单的情况(没有frame/iframe) 在B页面中的function中: function close(){ window.opener.location.reload(); window.opener

测试-求这道题目代码 我只能做这种弹出提示框的 不能把分数和相应错题答案连接到新窗口

问题描述 求这道题目代码 我只能做这种弹出提示框的 不能把分数和相应错题答案连接到新窗口 <!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/xhtml" > &

Windows 8开发入门(五)弹出提示框MessageDialog与await、async关键字

在以前Silverlight.WPF中的弹出窗口提示中是MessageBox类中进行显示的,现在Windows 8中使用 Windows.UI.Popups命名空间下的MessageDialog类代替MessageBox. MessageDialog类有以下常用方法 和属性: ShowAsync():异步弹出消息框. Commands:添加命令,在弹出框界面上同步添加相应的按 钮. DefaultCommandIndex:设置默认按钮的索引,按ENTER键将激活该索引对应的命令按钮 Cancel