超简单的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实现提示效果弹出以及延迟隐藏的功能

最新文章

热门文章