自动登录勾选提示效果
要求:鼠标移入显示提示信息框;鼠标离开,信息框消失,消失的效果延迟
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实现提示效果弹出及延迟隐藏的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!