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 相关文章推荐
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
PHP 引用文件技巧
2010/03/02 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
python操作mysql数据库
2017/03/05 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
《少年王冕》教学反思
2014/04/11 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
结婚典礼主持词
2015/06/29 职场文书
大学生读书笔记范文
2015/07/01 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL