建站资讯

活动抽奖小程序_JS完成提示效果弹出及延迟隐藏

作者:admin 发布时间:2021-01-07
JS实现提示效果弹出及延迟隐藏的功能       这篇文章主要介绍了JS实现提示效果弹出及延迟隐藏的功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

 自动登录勾选提示效果

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

 !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实现提示效果弹出及延迟隐藏的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!



收缩