本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参考,具体如下:
我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当鼠标移出头像或资料卡时,资料卡延时隐藏。
实质就是延时提示框问题!
首先写好布局:
1 2 3 4 5 6 7 8 9 | < 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)鼠标移出资料卡,资料卡延时隐藏,并且此时如果在移入到头像中,资料卡扔显示,并清除资料卡延时隐藏的变量
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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); }; }; |
优化代码:
1 2 3 4 5 6 7 8 9 | 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”]
第一种:函数外获取变量,调用函数,适用于一个或两个元素调用此事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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); }; } }; |
第二种:函数外获取变量,调用函数,适用于多个元素调用此事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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循环遍历为每个元素绑定事件:
1 2 3 4 | var number= null ; for (number=0;number<3;number++){ reminder( "head" , "info" , "onmouseover" , "onmouseout" ,number); } |
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区
联系客服