javascript实现延时显示提示框效果
更新时间：2017年06月01日 17:19:34 作者：CHC
这篇文章主要为大家详细介绍了javascript实现延时显示提示框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js延时提示框效果演示：
实现方法
移入显示，移出隐藏
移除延时隐藏，可以实现从第一个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中使用document.write来写入一些东西，有的时候可能因为我们无法改变某一部分HTML而不得不使用这样的办法，也有的时候是因为在进行跨应用的脚本调用。2010-08-08
这篇文章主要为大家介绍了JavaScript File API实现文件上传预览，File API将极大地方便 Web 端的文件上传等操作，本文将介绍 File API的概况，并用两个实例展示File API的应用，感兴趣的小伙伴们可以参考一下2016-02-02
本文主要介绍了纯js模仿windows系统日历的思路与实现方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了 ajax跨域调用webservice服务例子和理解，最近ajax访问webservice遇到跨域的问题，网上搜索资料，总结如下2016-05-05
javascript之querySelector和querySelectorAll使用介绍
其实关于querySelector和querySelectorAll的介绍说明很多。在此主要是做个记录2011-12-12
这篇文章主要为大家详细介绍了Javascript和jQuery的深浅拷贝，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法，包括正则法、split拆分法等，需要的朋友可以参考下2016-04-04
今天总结javascript内置对象Date的使用，并且写一个重要的网页倒计时的核心算法案例，有需要的朋友可以借鉴参考下希望能够有所帮助，祝大家多多进步2022-03-03
核心是 position:relative;，才能让其内部的 ul 以绝对定位，通过改变 top 值实现向上移位置。2009-10-10
本文给大家介绍的是一篇国外网友写的博客，讲解的是关于实现复选框选中属性的问题，感觉非常不错，翻译过来推荐给大家，希望小伙伴们能够喜欢。2015-03-03
最新评论