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


Posted in Javascript onAugust 26, 2019

 自动登录勾选提示效果

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

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

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
小程序实现层叠卡片滑动效果
Aug 26 #Javascript
微信小程序 数据缓存实现方法详解
Aug 26 #Javascript
使用typescript构建Vue应用的实现
Aug 26 #Javascript
微信小程序实现手势滑动卡片效果
Aug 26 #Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 #Javascript
vue柱状进度条图像的完美实现方案
Aug 26 #Javascript
React传值 组件传值 之间的关系详解
Aug 26 #Javascript
You might like
PHP遍历二维数组的代码
2011/04/22 PHP
php动态函数调用方法
2015/05/21 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python3.3实现乘法表示例
2014/02/07 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
python创建子类的方法分析
2019/11/28 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
python的flask框架难学吗
2020/07/31 Python
聊聊python中的异常嵌套
2020/09/01 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
中班中秋节活动反思
2014/02/18 职场文书
银行求职信范文
2014/05/26 职场文书
物资采购方案
2014/06/12 职场文书
生日寿星公答谢词
2015/09/29 职场文书
2016年寒假生活小结
2015/10/10 职场文书