就好像这功能。

代码如下

<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. bugzilla4的xmlrpc接口api调用实现分享: xmlrpc + https + cookies + httpclient +bugzilla + java实现加密通信下的xmlrpc接口调用并解决登陆保持会话功能

    xmlrpc .  https . cookies . httpclient.bugzilla . java实现加密通信下的xmlrpc接口调用并解决登陆保持会话功能,网上针对bugzilla的实现很 ...

  2. iOS 动画 旋转 移动简单代码

    #import "ViewController.h" @interface ViewController () { UIImageView *imgView; BOOL flag; ...

  3. ACM感悟

    声明:本文是写给弱校ACM新手的一点总结,受自身水平和眼界所限,难免会有一些个人主观色彩,希望大牛指正 感谢@Wackysoft .@哇晴天 . @ 一切皆有可能1 的指教,现根据这些建议,文章已进行 ...

  4. Qt Creator提示"Qt没有被正确安装,请运行make install"的解决办法

    笔者最近使用Qt在开发一些小程序,觉得这个框架设计确实很好,使用了信号和槽解决了组件之间的通讯问题,可以说是基于C++语言上一个非常大的创新,大大提高了开发人员的编码效率,也使整个C++语言更加抽象. ...

  5. 从零开始学习Node.js例子六 EventEmitter发送和接收事件

    pulser.js /* EventEmitter发送和接收事件 HTTPServer和HTTPClient类,它们都继承自EventEmitter EventEmitter被定义在Node的事件(e ...

  6. [转]设置Android手机以使用ARM Streamline进行性能分析(二)

    原文因为arm社区改版访问不到了,原作者鲍方,原文地址,这篇是从google cache里挖出来的,希望能帮到要对cocos2dx优化的各位   Posted by Fang Bao, Leave C ...

  7. 计算std:string的字节长度

    如果项目本身是使用 Unicode 字符集和utf8编码,std::string的length(),size()甚至是c的strLen取到的都是字节长度了,比如三个汉字,就是9, 以上情况不满足的话, ...

  8. distributed 以及 distributional 语义表达的区别

    昨天在审核资讯翻译的时候遇到这两个单词,文章里讲的也不清楚,感觉翻译的也不到位.今天就单独拿出来比较一下吧.尽管这两个单词相似,它们的具体实现方法还是有很大区别的. Distributional wo ...

  9. bk. 2014.12.1

    typedef void (*halKeyCback_t) (uint8 key, uint8 state) 表示定义halKeyCBack_T为指向函数的指针,该函数的特点是形参(uint8,uin ...

  10. c语言多线程队列读写

    最近用c语言写了个简单的队列服务,记录一下,文件结构为 main.c queue.c queue.h,代码如下: 主函数 #define NUM_THREADS 200 #include <st ...