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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
详解参数传递四种形式
Jul 21 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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 和 MySQL 时区的一点总结
2008/03/26 PHP
php中的观察者模式
2010/03/24 PHP
php 中英文语言转换类
2011/09/07 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
js加解密 脚本解密
2008/02/22 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
javascript数组排序汇总
2015/07/07 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
微信小程序异步处理详解
2017/11/10 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
python uuid模块使用实例
2015/04/08 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
Python input函数使用实例解析
2019/11/22 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python mysql中in参数化说明
2020/06/05 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
中医学专业自荐信范文
2014/04/01 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
nginx之内存池的实现
2022/06/28 Servers