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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
bootstrap table小案例
Oct 21 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
详解使用vue-admin-template的优化历程
May 20 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
URL Rewrite的设置方法
2007/01/02 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
校本教研工作方案
2014/01/14 职场文书
酒店员工培训方案
2014/06/02 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
python中pandas对多列进行分组统计的实现
2021/06/18 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL