JS实现提示效果弹出及延迟隐藏的功能
2019-08-26 10:27
645 查看
自动登录勾选提示效果
要求:鼠标移入显示提示信息框;鼠标离开,信息框消失,消失的效果延迟
<!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实现提示效果弹出及延迟隐藏的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- js实现仿网易点击弹出提示同时背景变暗效果
- JS实现仿中关村论坛评分后弹出提示效果的方法
- JS弹出模式提示窗体,实现页面其他地方不可编辑效果
- JS组件Bootstrap实现弹出框和提示框效果代码
- JS组件Bootstrap实现弹出框和提示框效果代码
- JS组件Bootstrap实现弹出框和提示框效果代码
- JS实现MSN提示弹出的效果
- JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
- JS组件Bootstrap实现弹出框和提示框效果代码
- JS组件Bootstrap实现弹出框和提示框效果代码
- JS组件Bootstrap实现弹出框和提示框效果代码
- JS弹出模式提示窗体,实现页面其他地方不可编辑效果
- js实现页面查询弹出div隐藏背景提示进度
- JS实现仿中关村论坛评分后弹出提示效果的方法
- JS组件Bootstrap实现弹出框和提示框效果代码
- js实现仿网易点击弹出提示同时背景变暗效果
- JS组件Bootstrap实现弹出框和提示框效果代码
- js实现的键盘开启大写锁定提示和密码显示与隐藏的效果
- js实现右下角消息提示功能
- 仿XP关机效果的弹出窗口(JS+样式实现)