本篇文章给大家带来的内容是关于js延时定时器模拟qq中划过头像会显示个人信息的功能（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
原理采用鼠标划入划出事件
利用定时器延迟消失
清除定时器
代码实现<!doctype html><html> <head> <meta charset="utf-8"> <title>延时定时器模拟qq划过头像显示用户信息</title> <style> div{ float:left; margin:10px; } #div1{ width: 50px; height:50px; background:red; } #div2{ width: 250px; height: 180px; background: #ccc; display: none; } </style> <script> window.onload=function(){ var odiv1=document.getelementbyid(div1); var odiv2=document.getelementbyid(div2); var timer=null; odiv1.onmouseover=function(){ cleartimeout(timer); odiv2.style.display=block; } odiv1.onmouseout=function(){ timer=settimeout(function(){ odiv2.style.display=none; },500) } odiv2.onmouseover=function(){ cleartimeout(timer); } odiv2.onmouseout=function(){ timer=settimeout(function(){ odiv2.style.display=none; },500) } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body></html>
把相同、相似代码进行合并<!doctype html><html> <head> <meta charset="utf-8"> <title>延时定时器模拟qq划过头像显示用户信息</title> <style> p{ float:left; margin:10px; } #p1{ width: 50px; height:50px; background:red; } #p2{ width: 250px; height: 180px; background: #ccc; display: none; } </style> <script> window.onload=function(){ var op1=document.getelementbyid(p1); var op2=document.getelementbyid(p2); var timer=null; op1.onmouseover=op2.onmouseover=function(){ cleartimeout(timer); op2.style.display=block; } op1.onmouseout=op2.onmouseout=function(){ timer=settimeout(function(){ op2.style.display=none; },500) } } </script> </head> <body> <p id="p1"></p> <p id="p2"></p> </body></html>
相关推荐：
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用_javascript技巧
js延时器提示框的应用实例代码解析_javascript技巧
以上就是js延时定时器模拟qq中划过头像会显示个人信息的功能（代码）的详细内容。