本篇文章给大家带来的内容是关于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中划过头像会显示个人信息的功能(代码)的详细内容,更多请关注php中文网其它相关文章!
已抢65071个
抢已抢28266个
抢已抢15272个
抢已抢7645个
抢已抢9531个
抢已抢19341个
抢