javascript实现延时显示提示框效果

2024-10-22 15:41:05

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源码地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS延时器提示框的应用实例代码解析

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延时显示提示框</title> <style> #div1 { float: left; width: 60px; height: 60px; background-color: aqua;
JS延时提示框实现方法详解

本文实例讲述了JS延时提示框实现方法.分享给大家供大家参考,具体如下: 提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失. 实现功能思路: 1.获取元素. 2.当鼠标指向Div1时,Div2显示. 3.当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2. 4.当鼠标指向Div2时,Div2显示.因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTi
javascript实现延时显示提示框特效代码

本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法.分享给大家供大家参考.具体如下: 先给大家展示一个延迟/定时/强制弹出窗口的JS代码参数解释: 设置时间:Then.setTime(Then.getTime() + 1*60*60*1000) mylove/ttan.htm(过渡网页) ttan.htm中的 http://弹出网页/ 是要弹出的网页 scroll:1(滚动条) status:1(状态栏) help:1(帮助按钮) toolbar=1(工具栏)
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/x
JavaScript实现简单Tip提示框效果

本文实例讲述了JavaScript实现简单Tip提示框效果.分享给大家供大家参考,具体如下: // JavaScript Document document.write("<div id='tip' style='position:absolute; width:300px; z-index:1; background-color: #ffffff; border: 1px solid gray; overflow: visible;visibility: hidden;font-size
javascript 实用的文字链提示框效果

效果要基本实现以下功能: (1)鼠标滑过文章中的链接文字,要在相应位置弹出提示框,提示框的样式由css来控制,高度自适应:鼠标可以点击提示框的中的链接,滑离提示框时,框自动消失: (2)把提示框的位置控制在文本域范围之内,如果链接文字处在文本域左侧,提示框要居右显示,使其不会出离文本域:反之,如果链接文字处在文本域右侧,提示框要居左显示: (3)如果文本域内容很多,而链接文字恰巧处于浏览器底部,为了使提示框不出离于浏览器的可视范围,提示框的位置要自动调整到链接文字的上面: 1.css 复制代码
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析

本文实例讲述了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法.分享给大家供大家参考,具体如下: 实现效果如上图,当鼠标放置到名字上时,则显示出内容详情. 实现具体过程如下: 1.需要加这句js  <script> $(function () { $('[data-toggle="popover"]').popover() }); </script> 2.html代码如下: <td
javascript弹出带文字信息的提示框效果

本文实例讲述了javascript弹出带文字信息的提示框效果.分享给大家供大家参考,具体如下: tooltips.js: // position of the tooltip relative to the mouse in pixel // var offsetx = 12; var offsety = 8; function newelement(newid) { if(document.createElement) { var el = document.createElement('di
jquery实现鼠标滑过显示提示框的方法

本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加 jquery.js.按钮图片.提示框图片 ) HTML 代码复制代码代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

本文实例讲述了jQuery实现漂亮实用的商品图片tips提示框效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script type="text/javascript&
JS实现跟随鼠标的链接文字提示框效果

本文实例讲述了JS实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可.你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

javascript实现延时显示提示框效果

相关推荐

随机推荐