本文实例讲述了射流研究…实现的模仿即时通信软件头像资料卡显示与隐藏效果。分享给大家供大家参考，具体如下：

我们使用即时通信软件时经常需要查看朋友的资料卡，当我们把鼠标移入头像时，资料卡显示，并且鼠标能在头像与资料卡之间能随意移动，当鼠标移出头像或资料卡时，资料卡延时隐藏。

实质就是延时提示框问题！

首先写好布局：

样式分区{ float:leftmargin:5px}。磁头{宽度：50像素高度：50 px背景-颜色：粉色；} .信息{宽度：250像素高度：200 px背景-颜色：蓝色；display : none }/style div class=' head '/div div class=' info '/div/div其次射流研究…部分：

思路：

(1)鼠标移入头像，资料卡显示；鼠标移出头像，资料卡延时隐藏设置超时(2)鼠标移入资料卡，资料卡仍显示，并清除资料卡延时隐藏的变量(3)鼠标移出资料卡，资料卡延时隐藏，并且此时如果在移入到头像中，资料卡扔显示，并清除资料卡延时隐藏的变量

窗户。onload=function(){ var Ohead=document。getelementsbyclassname(' head ')[0]；var oInfo=文档。getelementsbyclassname(' info ')[0]；定义变量计时器=nullohead。onmouseover=function(){ cleartime out(计时器);oinfo。风格。display=' block};奥哈德。onmouseout=function(){ timer=setTimeout(function(){ oin fo }。风格。显示='无'；},500);};oinfo。onmouseover=function(){ cleartime out(计时器);oinfo。风格。display=' block};oinfo。onmouseout=function(){ timer=setTimeout(function(){ oin fo }。风格。显示='无'；},500);};};优化代码：

oinfo。onmouseover=Ohead。onmouseover=function(){清除超时(计时器);oinfo。风格。display=' block};oinfo。onmouseout=Ohead。onmouseout=function(){ timer=setTimeout(function(){ oin fo }。风格。显示='无'；},500);};函数封装：

注意：事件xx .等于["xx"]

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

窗户。onload=function(){ var Ohead=document。getelementsbyclassname(' head ')[0]；var oInfo=文档。getelementsbyclassname(' info ')[0]；提醒(oHead，oInfo，' onmouseover '，' on mouse out ')；功能提醒(div1、div2、event1、event 2){ var timer=null；div 1[事件1]=div 2[事件1]=function(){ cleartime out(计时器);第二分区。风格。display=' block};div 1[事件2]=div 2[事件2]=function(){ timer=setTimeout(function(){ div 2 }。风格。显示='无'；},500);};}};第二种：函数外获取变量，调用函数，适用于多个元素调用此事件

窗户。onload=function(){ var number=0；提醒(“head”、“info”、“onmouseover”、“onmouseout”、number)；函数提醒(div1，div2，event1，event2，num){ var Ohead=document。getelementsbyclassname(div 1)[num]；var oInfo=文档。getelementsbyclassname(div 2)[num]；定义变量计时器=NullOhead[事件1]=OinFo[事件1]=function(){ cleartime out(计时器);oinfo。风格。display=' block};oHead[事件2]=oInfo[事件2]=function(){ timer=setTimeout(function(){ oInfo }。风格。显示='无'；},500);};}};比如，一共有三个头像的话，就可以用为循环遍历为每个元素绑定事件：

var number=null for(number=0；数字3;数字){ 0提醒(“head”、“info”、“onmouseover”、“onmouseout”、number)；}更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。