超简单的js实现提示效果弹出以及延迟隐藏的功能
<!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实现提示效果弹出以及延迟隐藏的功能的更多相关文章
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- Bootstrap入门（二十九）JS插件6：弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
- 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...
- 基于js alert confirm样式弹出框
基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- Python3+Selenium3+webdriver学习笔记13（js操作应用：弹出框无效如何处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...
- JS/CSS 在屏幕底部弹出消息
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- js实现第一次打开网页弹出指定窗口（常用功能封装很好用）
js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...
- mui popover 自定义 弹出位置 显示 隐藏
mui popover 一.要显示.隐藏弹出菜单插件,mui推荐使用锚点方式. 1.页面顶部导航栏.底部工具栏固定位置 <header class="mui-bar mui-bar-n ...
随机推荐
- html2canvas原理
html2canvas有2种模式,一种是利用foreignObject,一种是纯canvas绘制 1.foreignObject到canvas 步骤: 1.把要截图的dom克隆一份,过程中把getCo ...
- P1169 [ZJOI2007]棋盘制作——悬线法
---恢复内容开始--- 给你一个矩阵,选出最大的棋盘,棋盘的要求是黑白相间(01不能相邻),求出最大的正方形和矩形棋盘的面积: 数据n,m<=2000; 这个一看就可能是n2DP,但是写不出. ...
- redis集群搭建问题
redis集群创建执行 ./redis-trib.rb create --replicas 1 XXXX:PORT1 XXXX:PORT2 .... 的时候 一直等待 Waiting for the ...
- linux系统rwx（421）、777权限详解
摘要 linux的常见权限,mark一下 常用的linux文件权限如下: 444 r--r--r-- 600 rw------- 644 rw-r--r-- 666 rw-rw-rw- 700 rwx ...
- OpenDayLight Beryllium版本 下发流表实现hardtimeout
1. 实验拓扑 2. 创建拓扑 from mininet.topo import Topo class MyTopo(Topo): def __init__(self): # initilaize t ...
- POI的XWPFTableCell的方法
1. XWPFParagraph addParagraph() 在这个表格单元格中添加一个段落 2. void addParagraph(XWPFParagraph p) 给这个表格加一段 3. ja ...
- 【SpringBoot】整体下载大文件与分批下载大文件（利用MySql数据库的Limit实现）
在前文里谈过一次性从数据库取一个大结果集有可能导致outofMemory,当时的想法是分批去取回来,今天把它实现了,特地把代码分享出来: 工程下载:https://files.cnblogs.com/ ...
- Eclipse添加Android library 错误的原因
这两天把项目从本地转移到GIT上,本来我的Workspace是在D盘,现在因为感觉D盘不够用,就把GIT到的项目放到E盘了 按照以往的用法,GIT下来以后再往属性里添加依赖库就OK了,但是这次怎么也无 ...
- java网络通信：异步非阻塞I/O (NIO)
转: java网络通信:异步非阻塞I/O (NIO) 首先是channel,是一个双向的全双工的通道,可同时读写,而输入输出流都是单工的,要么读要么写.Channel分为两大类,分别是用于网络数据的S ...
- Qt编写自定义控件25-自定义QCustomPlot
一.前言 上次在写大屏数据可视化电子看板系统时候,提到过改造QCustomPlot来实现柱状分组图.横向柱状图.横向分组图.鼠标悬停提示等.这次单独列出来描述,有很多人疑问为啥不用QChart,或者e ...