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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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
晶体管单管来复再生式收音机
2021/03/02 无线电
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
html下载本地
2006/06/19 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
学雷锋志愿者活动方案
2014/08/21 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
公务员个人考察材料
2014/12/23 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
如何写好竞聘报告
2019/04/03 职场文书
python利用while求100内的整数和方式
2021/11/07 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang