就好像这功能。

代码如下

<style>

    #div1{

        width:50px;

        height:50px;

        background:red;

        margin-bottom:10px;

    }

    #div2{

        width:200px;

        height:200px;

        background:black;

        display:none;

    }

</style>

<body>

<div id="div1"></div>

<div id="div2"></div>

</body>
<script>

    window.onload=function()

    {

        var div1=document.getElementById("div1");

        var div2=document.getElementById('div2');

        var timer=null;

        div1.onmouseover= function()

        {

             div2.style.display='block';

        };

                div1.onmouseout= function()

                    {

                        clearTimeout(timer);

                       timer= setTimeout(function()

                        {

                             div2.style.display='none';

                        }, 500)

                    };

            div2.onmouseover=function()

            {

                clearTimeout(timer);

            };

            div2.onmouseout=function(){

                 timer=setTimeout(function(){div2.style.display='none';},500);

            }

    }

</script>

为什么要用延时器，

因为当移动另外一个模块时需要一定的时间，延时，鼠标能有一定的时间移到新的模块。

js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块的更多相关文章

  1. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  2. JS鼠标移入，移出事件

    该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...

  3. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  4. 关于js判断鼠标移入元素的方向——上下左右

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  5. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  6. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  7. Node.js 教程 06 - 函数

    前言: 本篇介绍的是Node.js中的函数,相对于上一篇会简单一点,其实和我们Javascript中的function无异. 好了,废话不多说了,我们进入正题吧. Node.js函数: [示例1:创建 ...

  8. 关于js的回调函数的一点看法

    算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...

  9. js立即执行函数

    一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号   (function(){alert(1);})(); ...

随机推荐

  1. Android 4.2以上的手机USB调试设置

    今天遇到一个问题,我手上有两部手机一部是红米.一部是中兴的青漾QY N986,两部手机的Android系统都是4.2.1的,连接到电脑测试,找了半天没有找到设置开发者选项,后来在网上找了半天,才发现g ...

  2. OC中intValue要注意的地方

    在程序中,发现一个问题,写了个例子,如下:         NSDictionary * dict = [[NSDictionary alloc] init];        NSString * s ...

  3. 利用ftp端口设置，浅谈windows防火墙之应用+ftp直接资源管理器登陆

    win服务器的版本是不错的.防火墙也比较能用.server-u 6.4则是比较稳定.兼容性好的的版本,所以很多人在用 1.服务器为了安全,一般开启windows高级防火墙,在网络连接处右键鼠标,有弹出 ...

  4. C# 6.0新特性（转载）

    简介 VS 2015中已经包含C# 6.0. C#在发布不同版本时,C#总是会有新特性,比如C#3.0中出现LINQ,C#4.0中的动态特性,c#5.0中的异步操作等.. C# 6.0中与增加了不少新 ...

  5. 电子词典的相关子函数db.c程序

    整个电子词典是分块做的:包含的Dic_Server.c,Dic_Client.c,db.c,query.c,xprtcl.c,dict.h,xprtcl.h,dict.txt(单词文件) 下面是db. ...

  6. dyld: Symbol not found: _OBJC_CLASS_$_NSURLSessionDataTask

    dyld: Symbol not found: _OBJC_CLASS_$_NSURLSessionDataTask   Referenced from: /var/mobile/Applicatio ...

  7. [URAL]刷题记录表

    URAL 1001.  A + B 1002.  简单题,开方计算! 1003.

  8. python-内置函数、装饰器

    本节内容:一之前课程回顾: 在书写代码的时候,先写简单的逻辑在写复杂的逻辑.概念梳理:1.函数在传递实参的时候是传递的是引用而不是从内存中重新赋相同值给形参.比如: def test(x): x.ap ...

  9. Understanding Linux /proc/cpuinfo

    http://www.richweb.com/cpu_info A hyperthreaded processor has the same number of function units as a ...

  10. checkbox提交多组数据到action

    突然想通过checkbox来提交多组数据到action,一时间想不起来怎么写,到网上流岚大婶们的笔迹之后,有了新发现! 方法一: 在action用一个String类型的变量来接受checkbox传过来 ...