定时器 — 延时小菜单

时间:2022-11-23 23:31:35

定时器 — 延时小菜单

鼠标放在粉色qq框中,黄色title提示框过一会出现;鼠标移开qq框,title提示框过一会消失

出现的时间可以根据定时器来设置秒数

html:

<div id="qq"></div>
<div id="title"></div>

css:

#qq {
width: 150px;
height: 300px;
background-color: #f9c;
}

#title {
width: 100px;
height: 80px;
background-color: #FC6;
position: absolute;
top: 10px;
left: 160px;
display: none;
}

js:

function $(id){return document.getElementById(id);}//封装id函数
var timer = null;//设置定时器开关

$('qq').onmouseover = show;//鼠标移入QQ面板,显示title提示框
$('qq').onmouseout = hide;//鼠标移出QQ面板,隐藏title提示框

$('title').onmouseover = show;//鼠标移入提示title框,让title提示框显示
$('title').onmouseout = hide;//鼠标移出提示title框,让title提示框消失

function show(){
// 在显示前先把定时器关闭,否则鼠标离开QQ面板时title框会消失
clearInterval(timer);
$('title').style.display = 'block';
}
function hide(){
timer = setTimeout(function(){
$('title').style.display = 'none';
},1000);
}

注意:
在写html时,提示框要和面板并列,不要包含;
提示框出现的动画效果可以随意设置,这里没有添加任何动画效果。