Home > Article > Web Front-end > js delay timer simulates the function of displaying personal information when swiping the avatar in QQ (code)
The content of this article is about the js delay timer simulation function (code) that displays personal information when swiping the avatar in QQ. It has certain reference value. Friends in need can refer to it. I hope It will help you.
Use mouse stroke-in and stroke-out events
Use timer to delay disappearance
Clear timer
<!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>
Related recommendations:
javascript interval timer (delay timer) learning interval call and delay call_javascript skills
Application example code of JS delay prompt box Parsing_javascript skills
The above is the detailed content of js delay timer simulates the function of displaying personal information when swiping the avatar in QQ (code). For more information, please follow other related articles on the PHP Chinese website!