脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 提示框

JavaScript实现短暂提示框功能

 更新时间：2018年04月04日 08:41:25   作者：_张风捷特烈  
这篇文章主要介绍了JavaScript实现短暂提示框功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下

业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入ToolTip.js和ToolTip.css

主方法：ToolTip.show（需要提示的元素id, 随意不重复即可, 要提示的html文本, 宽（可不指定）, 高（可不指定））;

ToolTip.show（obj, id, html, width, height）;

效果如下：

1.显示文本：

2:显示图片

 3:显示网站

js代码：F:\Html5\Plugins\ToolTip\js\ToolTip.js    

(function () {
 var ToolTip = {};
 /**
 * 显示函数
 */
 ToolTip._showTip = function (parentId, childId, html, width, height) {
 var parent = document.getElementById(parentId)//要提示的元素
 var child = document.getElementById(childId);
 if (child === null) {//创建
  var toolTip = document.createElement("div");
  toolTip.classList = "ui-tooltip-box";
  toolTip.id = childId;
  toolTip.innerHTML = html;
  parent.appendChild(toolTip);
  toolTip.style.width = width ? width + "px" : "auto"
  toolTip.style.height = height ? height + "px" : "auto"
  //定位：
  toolTip.style.position = "absolute";
  toolTip.style.display = "block";
  var left = parent.offsetLeft;
  var top = parent.offsetTop;
  if (left + toolTip.offsetWidth > document.body.clientWidth) {
  left = document.body.clientWidth / 2;
  }
  toolTip.style.left = left + "px";
  toolTip.style.top = top + 20 + "px";
  parent.onmouseleave = function (ev) {
  setTimeout(function () { //延迟：
   document.getElementById(childId).style.display = "none";//隐藏
  }, 300);
  }
 } else {
  //显示
  document.getElementById(childId).style.display = "block";
 }
 },
 /**
  * 调用入口
  */
 ToolTip.show = function (parentId, childId, html, width, height) {
  var parent = document.getElementById(obj)
  parent.onmouseenter = function (ev) {
  ToolTip._showTip(parentId, childId, html, width, height)
  }
 }
 window.ToolTip = ToolTip;
})();//为防止污染，将方法写在匿名函数中

html代码：F:\Html5\Plugins\ToolTip\ToolTip.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>提示框</title>
 <link rel="stylesheet" type="text/css" href="ToolTip.css" rel="external nofollow" >
</head>
<body>
<div class="ui-tooltip-demo">
 <p><a class="ui-tooltip" id="tooltip-text">唐诗</a></p>
 <p><a class="ui-tooltip" id="tooltip-photo">背景图片</a></p>
 <p><a class="ui-tooltip" id="tooltip-poem">Yi人诗社</a></p>
</div>
<script src="js/ToolTip.js"></script>
<script>
//调用方式
 ToolTip.show("tooltip-text", "01", "唐诗泛指创作于唐朝的诗" +
 "。唐诗是中华民族最珍贵的文化遗产之一，是" +
 "中华文化宝库中的一颗明珠，" +
 "同时也对世界上许多民族和国家的文化发展产生了很大影响，" +
 "对于后人研究唐代的政治、民情、风俗、" +
 "文化等都有重要的参考意义和价值。",300,90);
 ToolTip.show("tooltip-photo", "02", "<img src=\"imgs/bg.jpg\" height=\"80px\">",150,80);
 var html='<iframe src="http://www.toly.top" width="480px" height="300px"/>'
 ToolTip.show("tooltip-poem", "03", html);
</script>
</body>
</html>

css代码：F:\Html5\Plugins\ToolTip\ToolTip.css

body {
 font-size: 14px;
 line-height: 1.8;
 background-image: url("imgs/bg.jpg");
}
.ui-tooltip-demo {
 width: 500px;
 margin: 30px auto;
 padding: 20px 30px;
 background-color: rgba(100%, 100%, 100%, 0.4);
 border-radius: 10px;
 text-align: center;
 box-shadow: 2px 1px 0px 3px rgba(0, 0, 0, 0.2);
}
.ui-tooltip-demo .ui-tooltip {
 color: #03f;
 font-size: 18px;
 cursor: help;
}
.ui-tooltip-box {
 display: block;
 background: #fff;
 line-height: 1.6;
 border: 1px solid #6cf;
 color: #333;
 padding: 20px;
 font-size: 12px;
 border-radius: 5px;
 overflow: auto;
}

总结

以上所述是小编给大家介绍的JavaScript实现短暂提示框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 使用原生js实现拖拽和粘贴上传图片功能

    使用原生js实现拖拽和粘贴上传图片功能

    这篇文章主要介绍了使用原生js实现拖拽和粘贴上传图片功能,Vue/Rect 生态用多了都快忘记原生js怎么写了,今天需要直接在服务器裸写个页面,实现 textarea 文本框里接收拖拽多个图片,需要的朋友可以参考下
    2024-04-04
  • 实例讲解JS中pop使用方法

    实例讲解JS中pop使用方法

    在本篇文章里我们给大家分享了关于JS中pop使用方法的实例内容，有兴趣的朋友们学习下。
    2019-01-01
  • JavaScript参数个数可变的函数举例说明

    JavaScript参数个数可变的函数举例说明

    JavaScript允许一个函数传递个数可变的参数，因为有arguments这个内置对象，它一个函数传递的所有参数的数组
    2014-10-10
  • js闭包的9个使用场景

    js闭包的9个使用场景

    这篇文章主要介绍了js 闭包的9个使用场景，帮助大家更好的理解和学习JavaScript 闭包的使用，感兴趣的朋友可以了解下
    2020-12-12
  • JS优雅的使用function实现一个class

    JS优雅的使用function实现一个class

    这篇文章主要为大家介绍了JS优雅的使用function实现一个class示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • javascript实现控制文字大中小显示

    javascript实现控制文字大中小显示

    网页上可以自由改变字体大小是个非常有助于用户体验的小功能，现在许多网站上都有此功能，今天我们来简单实现下。
    2015-04-04
  • 微信小程序实现点击空白隐藏的方法示例

    微信小程序实现点击空白隐藏的方法示例

    这篇文章主要介绍了微信小程序实现点击空白隐藏的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 微信小程序url传参写变量的方法

    微信小程序url传参写变量的方法

    这篇文章主要介绍了微信小程序url传参写变量的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • JavaScript引入方式深入解读

    JavaScript引入方式深入解读

    这篇文章主要介绍了JavaScript引入方式案例,结合实例形式分析了JavaScript引入方式特性与相关操作技巧,需要的朋友可以参考下
    2022-07-07
  • js下拉菜单语言选项简单实现

    js下拉菜单语言选项简单实现

    大家对下拉菜单并不陌生吧，下面为大家介绍下使用js实现下拉菜单语言选项，具体实现如下，喜欢的朋友可以看看
    2013-09-09

最新评论