js模仿QQ头像资料卡显示与隐藏

我们使用QQ时经常需要查看朋友的资料卡，当我们把鼠标移入头像时，资料卡显示，并且鼠标能在头像与资料卡之间能随意移动，当鼠标移出头像或资料卡时，资料卡延时隐藏。
实质就是延时提示框问题！

首先写好布局：

<style>div { float:left; margin:5px; }.head { width:50px;height:50px;background-color:pink; }.info { width:250px;height:200px;background-color:blue;display:none;  }
</style>
<div><div class="head"></div><div class="info"></div>
</div>

其次js部分：
思路：
（1）鼠标移入头像，资料卡显示；鼠标移出头像，资料卡延时隐藏setTimeout
（2）鼠标移入资料卡，资料卡仍显示，并清除资料卡延时隐藏的变量
（3）鼠标移出资料卡，资料卡延时隐藏，并且此时如果在移入到头像中，资料卡扔显示，并清除资料卡延时隐藏的变量

window.onload =function(){var oHead = document.getElementsByClassName("head")[0];var oInfo = document.getElementsByClassName("info")[0];var timer = null;oHead.onmouseover=function(){clearTimeout(timer);oInfo.style.display="block";};oHead.onmouseout=function(){timer = setTimeout(function(){oInfo.style.display="none";},500); };oInfo.onmouseover=function(){clearTimeout(timer);oInfo.style.display="block";};oInfo.onmouseout=function(){timer = setTimeout(function(){oInfo.style.display="none";},500); };
};

优化代码：

oInfo.onmouseover = oHead.onmouseover=function(){clearTimeout(timer);oInfo.style.display="block";};oInfo.onmouseout = oHead.onmouseout=function(){timer = setTimeout(function(){oInfo.style.display="none";},500); };

函数封装：
注意：事件 .xx 等于 [“xx”]
第一种：函数外获取变量，调用函数，适用于一个或两个元素调用此事件

window.onload =function(){var oHead = document.getElementsByClassName("head")[0];var oInfo = document.getElementsByClassName("info")[0];reminder(oHead,oInfo,"onmouseover","onmouseout");
function reminder (div1,div2,event1,event2){、     var timer = null; div1[event1] = div2[event1]=function(){clearTimeout(timer);div2.style.display="block";};div1[event2] = div2[event2]=function(){timer = setTimeout(function(){div2.style.display="none";},500); };}};

第二种：函数外获取变量，调用函数，适用于多个元素调用此事件

window.onload =function(){      var number=0;reminder("head","info","onmouseover","onmouseout",number);function reminder (div1,div2,event1,event2,num){var oHead = document.getElementsByClassName(div1)[num];var oInfo = document.getElementsByClassName(div2)[num];var timer = null; oHead[event1] = oInfo[event1]=function(){clearTimeout(timer);oInfo.style.display="block";};oHead[event2] = oInfo[event2]=function(){timer = setTimeout(function(){oInfo.style.display="none";},500); };}};

比如，一共有三个头像的话，就可以用for循环遍历为每个元素绑定事件：

var number=null;
for(number=0;number<3;number++){reminder("head","info","onmouseover","onmouseout",number);}

js模仿QQ头像资料卡显示与隐藏相关推荐

隐藏a标签html,a标签显示隐藏 js怎么控制a标签的显示和隐藏
js怎么控制a标签的显示和隐藏将标签放在层里面,控制层的显示和隐藏就可以: show是层的ID名, 隐藏层:document.getElementById("show").sty ...
HTML+CSS+JS实现仿QQ个人资料卡（思路+源码）
个人名片:
插播一条 QQ头像无法正常显示问题
问题背景不知道啥什么,QQ群的头像有些显示不全直接是默认的头像.想一想最近也没做啥,怎么就出问题了. 后来想一想,大概是个人文件夹的文件出问题了解决办法好友头像显示问题的删除 MiscHead. ...
超简单的JS模仿QQ弹窗效果
QQ的弹窗效果在网页上用JS的一个moveBy方法就可以实现,moveBy的作用就是将窗口的位置移动到指定的地方,moveBy(xx,yy) xx和yy就是移动的偏移量代码如下: <scr ...
模仿qq头像上传的弹出框效果
1.涉及到知识点,如下: 1.1.自定义对话框 1.2.动画 1.3.样式选择器 1.4.shape的使用 2.代码编写 2.1首先创建选择照片的弹出对话框的布局文件,代码如下: headicon_c ...
js IntersectionObserver监听元素的显示与隐藏，图片懒加载
IntersectionObserver监听显隐,监听元素在可视窗口中展示的比例,1:完全展示出来了,0:完全遮挡了,opacity和visibility控制的显隐是不会触发的.该api常用于图片懒加 ...
QQ实训项目(登录注册主界面消息列表资料卡)
界面废话不多说,直接上界面注册功能如下:用户名存入数据库界面检验密码是否符合规范 2:密码规范存入数据库并且加密(数据库的文件可以找我拷贝)加密是MD5加密单向加密 3:输入手机号码点击获取 ...
QQ资料修改器无法连接封面服务器,QQ编辑资料失败/qq头像和昵称无法修改怎么办是什么原因？...
2018QQ编辑资料失败/qq头像和昵称无法修改原因及解决方法,来看看2018QQ编辑资料失败/qq头像和昵称无法修改原因及解决方法. 2018qq编辑资料失败怎么回事? 当你修改头像或网名时,左上角 ...
Javascript实现 QQ好友列表的展开和隐藏
Javascript实现 QQ好友列表的展开和隐藏你好哇刘岩!最近再看王小波写给李银河的<爱你就像爱生命>,好生羡慕刘银河,有个如此爱她的人,也很羡慕王小波又一个陪他到老的人.其中最喜欢 ...
easyui 隐藏input_easyui datagrid 列显示和隐藏
//当查询IT基础设施的时候隐藏'STAFF_ID'.'ITSM_STAFF_ID' if($("input[name='currentstate']").val()==2){ $ ...

js模仿QQ头像资料卡显示与隐藏

js模仿QQ头像资料卡显示与隐藏相关推荐

最新文章

热门文章