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 弹出登录窗口实现代码
Dec 24 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
python爬取指定微信公众号文章
2018/12/20 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python pip如何手动安装二进制包
2020/09/30 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
意大利男装网店:Vrients
2019/05/02 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
学校司机岗位职责
2013/11/14 职场文书
前台文员我鉴定
2014/01/12 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
师德师风个人反思
2014/04/28 职场文书
全陪导游词
2015/02/04 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android