javascript实现延时显示提示框效果


Posted in Javascript onJune 01, 2017

js延时提示框效果演示:

javascript实现延时显示提示框效果

实现方法

移入显示,移出隐藏

移除延时隐藏,可以实现从第一个div移入第二个div,仍然可以显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1 {
 width: 50px;
 height: 50px;
 background: red;
 float: left
}
#div2 {
 margin-left: 10px;
 width: 250px;
 height: 150px;
 background: yellow;
 float: left;
 display: none
}
</style>
<script>
window.onload=function()
{
 var oDiv1=document.getElementById('div1');
 var oDiv2=document.getElementById('div2');
 var timer=null;
 oDiv1.onmouseover=oDiv2.onmouseover=function()
 {
 clearTimeout(timer);
 oDiv2.style.display='block';
 };
 oDiv1.onmouseout=oDiv2.onmouseout=function()
 {
 timer=setTimeout(function()
 {
  oDiv2.style.display='none';}
 ,500); 
 };
};
</script>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

GitHub源码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
vue.js 获取当前自定义属性值
Jun 01 #Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 #Javascript
vue快捷键与基础指令详解
Jun 01 #Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 #Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 #Javascript
Vue.Draggable实现拖拽效果
Jul 29 #Javascript
You might like
PHP+DBM的同学录程序(5)
2006/10/09 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python3如何将docx转换成pdf文件
2018/03/23 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python实现购物车购物小程序
2018/04/18 Python
Django框架安装方法图文详解
2019/11/04 Python
python实现宿舍管理系统
2019/11/22 Python
Python pip配置国内源的方法
2020/02/14 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
小学生自我评价范例
2013/09/24 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
岗位职责说明书
2014/05/07 职场文书
党员对照检查材料
2014/09/22 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
务虚会发言材料
2014/12/25 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
基于Redission的分布式锁实战
2022/08/14 Redis