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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
基于iview的router常用控制方式
May 30 Javascript
原生js+ajax分页组件
Jan 30 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
JavaScript WeakMap使用详解
Feb 05 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
1.PHP简介
2006/10/09 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
wxPython 入门教程
2008/10/07 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Django的session中对于用户验证的支持
2015/07/23 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
村官学习十八大感想
2014/01/15 职场文书
元旦活动感言
2014/03/08 职场文书
聚美优品励志广告词
2014/03/14 职场文书
绿色环保标语
2014/06/12 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Java异常处理try catch的基本用法
2021/12/06 Java/Android