JS实现提示效果弹出及延迟隐藏的功能
程序员文章站
2023-12-03 12:18:22
自动登录勾选提示效果
要求:鼠标移入显示提示信息框；鼠标离开,信息框消失，消失的效果延迟
自动登录勾选提示效果
要求:鼠标移入显示提示信息框；鼠标离开,信息框消失，消失的效果延迟
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
#sign{
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #ccc2c2;
}
#tip{
width: 150px;
height: 70px;
background-color: rgb(243, 200, 120);
border: 1px solid orange;
color: rgb(161, 59, 48);
display: none;
opacity: 1;
}
</style>
</head>
<body>
<span id="sign"></span>
<span>自动登录</span>
<div id="tip">为了您的安全请不要在网吧等公共场所使用！</div>
</body>
<script>
var osign = document.getelementbyid("sign");
var tip = document.getelementbyid("tip");
var timer;
var oo=1;
//鼠标移入时显示提示信息（让提示框的隐藏效果消失）
osign.onmouseover = function(){
//清除延时器以免出现闪烁
clearinterval(timer);
tip.style.display = "block";
tip.style.opacity=1;
}
//鼠标离开,信息消失，隐藏效果延迟
osign.onmouseout = function(){
clearinterval(timer);
timer = setinterval(function(){
//让透明度渐减，直至为零
oo -= 0.1;
tip.style.opacity=oo;
if(oo == 0){
clearinterval(timer);
}
},70);
//最后复原透明度，成为下次的开始值
oo=1;
}
</script>
</html>
总结
以上所述是小编给大家介绍的js实现提示效果弹出及延迟隐藏的功能，希望对大家有所帮助