当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现提示效果弹出及延迟隐藏的功能

JS实现提示效果弹出及延迟隐藏的功能

2019年09月07日  | 移动技术网IT编程  | 我要评论

 自动登录勾选提示效果

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

<!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实现提示效果弹出及延迟隐藏的功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网