js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块
就好像这功能。
代码如下
<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头像然后会出现新的模块的更多相关文章
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- JS鼠标移入，移出事件
该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...
- 关于js判断鼠标移入元素的方向--解释
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- 关于js判断鼠标移入元素的方向——上下左右
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结
Day27 html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...
- JS DOM操作 函数 事件 阻止事件冒泡
一 函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
- Node.js 教程 06 - 函数
前言: 本篇介绍的是Node.js中的函数,相对于上一篇会简单一点,其实和我们Javascript中的function无异. 好了,废话不多说了,我们进入正题吧. Node.js函数: [示例1:创建 ...
- 关于js的回调函数的一点看法
算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...
- js立即执行函数
一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); ...
随机推荐
- c# windows编程控件学习-2
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Read/Write file in Android
http://www.cnblogs.com/freeliver54/archive/2011/09/16/2178910.html
- Android studio的深坑 导jar包重复的异常处理
导包重复这个问题折磨了整整一天!! 第一个方法在gradle文件下看看有没有重复的包 如果有那么一切都是浮云分分钟搞定 ,最可恶的是在gradle里面没有. 在gradle里面找不到的话就要考虑一下 ...
- Unparsed aapt error(s)! Check the console for output解决方法
在Eclipse平台进行Android 应用开发时,编辑,修改或增删 res/下资源文件时有时会遇到如下错误提示:“Unparsed aapt error(s)! Check the console ...
- 详解<a>标签
相信对于学前端的人而言<a>标签并不陌生,我们先把他所有的属性列出来 一.主要属性 一般来说,a标签有着四种状态,分别是link,hover,active,visited,接下来我会仔细讲 ...
- HDU 4251 --- 主席树（划分树是正解）
题意:查询区间中位数 思路:模板题,相当于区间第K大的数,主席树可以水过,但划分树是正解.但还没搞明白划分树,先上模板 #include <iostream> #include <c ...
- HDU 2276
http://acm.hdu.edu.cn/showproblem.php?pid=2276 矩阵乘法可以解决的一类灯泡开关问题 /* 转移关系为 now left now* 1 0 1 1 1 0 ...
- 传智播客JavaWeb day06-jstl
一.jsp标签(sun公司提供的) 二.EL表达式 三.jstl (javaserver pages standard tag library) 1.为什么要有jstl jsp标签太弱,el表达式功能 ...
- Opencv基本数据结构
Opencv的数据结构:CvPoint系列.CvSize系列 .CvSize.CvRect.CvScalar.CvAr 大多数据结构都在cxtypes.h这个头文件里定义 1.CvPoint系列: ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...