欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript实现短暂提示框功能

程序员文章站 2023-11-26 11:59:52
业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入tooltip.js和tooltip.css 主方法：tooltip.show（需要提示的...

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

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

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

效果如下：

1.显示文本：

JavaScript实现短暂提示框功能

2:显示图片

JavaScript实现短暂提示框功能

 3:显示网站

JavaScript实现短暂提示框功能

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实现短暂提示框，希望对大家有所帮助

上一篇： 如果网站做不到这一点 就别谈细节优化了

下一篇： 素材公社：探寻设计素材类网站的发展趋势

推荐阅读