计时器中qq上的一个功能,延时作用
在qq主页面板上的最上方有自己的用户名,往用户名上移动会出现一个大框,往大框中移动,大框不会消失,如果离开大框或者姓名,大框就会消失,这一功能用到display:none的效果还有就是计时器的延时功能,用到onmoseover;
onmouseover 属性在鼠标指针移动到元素上时触发。
注释:onmouseover 属性不适用以下元 素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
onmoseover的相反是onmouseout;
且看如下代码:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript二级联动</title>
<style type="text/css">
#block1{
width: 40px;
height: 40px;
background: red;
float: left;
}
#block2{
width: 240px;
height: 240px;
background: gray;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div id = "block1"></div>
<div id = "block2"></div>
</body>
</html>
javascript代码如下:
var block1 = document.getElementById("block1");
var block2 = document.getElementById("block2");
block1.onmouseover = function(){
block2.style.display = 'block';
}
这一步实现的是将鼠标移到block1的时候block2出现;但是鼠标离开block1,block2仍然出现,我们需要将block2消失,则需要用到onmoseout来操作,如下:
block1.onmouseout = function(){
block2.style.display = 'none';
}
但是,这个效果还是有欠缺,因为从block1移动到block2的时候无法选中block2,而是很快的消失了,那么,我们需要一个延时来让block2慢点消失,给他一个setTimeout,并且500毫秒,因为setTimeout会有一个返回值,所以在之前设置一个var timer = null;一开始timer不知道要赋值什么,所以为null,再在下面的程序中将值付给timer,如下:
block1.onmouseout = function(){
timer = setTimeout("block2.style.display = 'none'",1000);
}
移到block2时需要block2一直显示,并且,之前block1的延时取消none这个延时的动作,所以如下代码:
block2.onmouseover = function(){
clearTimeout(timer);
block2.style.display = 'block';
}
那么block2移除鼠标时会怎么样呢?我们希望移除block2会消失,并且,移到block1的时候依然为显示,所以这边也需要一个延时,然后在block鼠标以上去的时候清除定时器的延时,这样block2移到block1上时不会出现消失了。如下代码
block2.onmouseout = function(){
time = setTimeout(" block2.style.display = 'none'",1000);
}
javascript总的代码如下:
var block1 = document.getElementById("block1");
var block2 = document.getElementById("block2");
var timer = null;
block1.onmouseover = function(){
block2.style.display = 'block';
clearTimeout(time);
}
block1.onmouseout = function(){
timer = setTimeout("block2.style.display = 'none'",1000);
}
block2.onmouseover = function(){
clearTimeout(timer);
block2.style.display = 'block';
}
block2.onmouseout = function(){
timer = setTimeout(" block2.style.display = 'none'",1000);
}
block1.onmuseout与 block1.onmouseout一样,所以整合后为:
var block1 = document.getElementById("block1");
var block2 = document.getElementById("block2");
var timer = null;
block1.onmouseover = function(){
block2.style.display = 'block';
clearTimeout(time);
}
block2.onmouseout = block1.onmouseout = function(){
timer = setTimeout("block2.style.display = 'none'",1000);
}
block2.onmouseover = function(){
clearTimeout(timer);
block2.style.display = 'block';
}
将javascript代码保存,在HTML中设置一个路径即可;
计时器中qq上的一个功能,延时作用的更多相关文章
- Element UI中的上传文件功能
上传文件给后台: <el-upload style="display:inline-block" :limit=" class="upload-demo& ...
- python中如何单独测试一个函数的作用
#!/usr/bin/python import os def get_env_varible(key): return os.getenv(key) if __name__ == '__main__ ...
- QQ上传大文件为什么这么快
今天和同事在群里讨论“QQ上传大文件/QQ群发送大文件时,可以在极短的时间内完成”是如何做到的. 有时候我们通过QQ上传一个几百M的文件,竟然只用了几秒钟,从带宽上限制可以得出,实际上传文件是不可能的 ...
- 微软develop apps在QQ上部分功能的实现
最近我对微软的develop apps的文档进行了简读,在感叹UWP在支持服务上的全面的同时,我不禁在在常用的APP上对于这些功能支持进行了部分的寻找对应.而我进行功能对照的,就是平时很常用的一款手机 ...
- 我需要在Web上完成一个图片上传的功能
我需要在Web上完成一个图片上传的功能. 这个页面需要能从手机中选择图片上传. 首先,这个页面是从微信上面触发的,所以修改了微信的的入口地址,增加了身份识别号作为传参. 跳转到页面的时候,页面先检查身 ...
- 完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)
现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...
- web实现QQ头像上传截取功能
由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传 ...
- Web 项目中分享到微博、QQ空间等分享功能
Web 项目中分享到微博.QQ空间等分享功能 网上有很多的模板以及代码,但是有很多都不能分享内容,简单的测试了下: 以新浪微博为例,文本框中的内容是title属性,下面的链接是url属性,如果你的链接 ...
- 简单练习题2编写Java应用程序。首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”、“取款”和“余额查询”。其次, 编写一个主类,在主类中测试Account类的功能
编写Java应用程序.首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”.“取款”和“余额查询”.其次, 编写一个主类,在主类中测试Account类的 ...
随机推荐
- GDAL 生成shp文件
附件:http://pan.baidu.com/s/1i3GPwrV(C#版GDAL接口.dll) 示例程序: http://pan.baidu.com/s/1jpIKQ (程序是在vs2008 x ...
- IE9以下通过css让html页面背景图片铺满整个屏幕
第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <hea ...
- JavaScript 数组操作备忘
数组的定义: 方法1. var mycars=new Array()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]=&qu ...
- SQL Server中in与exist效率比较
in和exists in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 一直以来认为exists比in效率高的说法是不准确的. 如果查询的两 ...
- Lake Counting--poj2386
Lake Counting Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 23950 Accepted: 12099 D ...
- 1041. Be Unique (20)
Being unique is so important to people on Mars that even their lottery is designed in a unique way. ...
- TensorFlow深度学习笔记 文本与序列的深度模型
Deep Models for Text and Sequence 转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎st ...
- ca 证书、签名
1.我现在没有个人CA证书,使用.中信建投网上交易,是如何保障安全的呢? 如果您目前没有个人CA证书,使用.中信建投网上交易,系统其实也是用CA证书的RSA体系进行加密的. 您在输入账户和密码进行登录 ...
- 10年程序员谈.Net程序员的职业规划(图/文)
原文地址:http://bbs.csdn.net/topics/390736769 从事Dotnet程序开发工作近10年了,从开始的月薪3k的小程序员菜鸟,到现在年薪60w的项目总经理,从战战兢兢的去 ...
- OpenLayers实现覆盖物选择信息提示
var map; function init() { map = new OpenLayers.Map("map",{projection:"EPSG:3857" ...