这里有新鲜出炉的Javascript教程,程序狗速度看过来!
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了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源码地址
来源: http://www.phperz.com/article/17/0904/338895.html