html提示框延时消失,JS实现提示效果弹出及延迟隐藏的功能

自动登录勾选提示效果

要求:鼠标移入显示提示信息框；鼠标离开,信息框消失，消失的效果延迟

Document

#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;

}

自动登录

为了您的安全请不要在网吧等公共场所使用！

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;

}

总结

以上所述是小编给大家介绍的JS实现提示效果弹出及延迟隐藏的功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！