js实现短暂提示框
业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入ToolTip.js和ToolTip.css
主方法：ToolTip.show（需要提示的元素id, 随意不重复即可, 要提示的html文本, 宽（可不指定）, 高（可不指定））;
- ToolTip.show（obj, id, html, width, height）;
效果如下：
- 显示文本：
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">
</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;
}
js实现短暂提示框的更多相关文章
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- 【JS学习笔记】第一个JS效果——鼠标提示框
分析效果实现原理--鼠标提示框 样式:div的display 事件:onmouseover,onmouseout 编写JS的流程 布局:HTML+CSS 属性:确定需要修改哪些属性 事件:确定用户做哪 ...
- 有关js弹出提示框几种方法
1直接提示只有确定功能的提示框 只显示提示信息 alert(“提示信息”); alert ();的参数只有一个就是提示信息,无返回值 2 弹出输入框让你输入内容 prompt() ; 有两个参数:第一 ...
- JS实现动态提示框
引言 什么项目都有个需求,应开发需求,需要写一个公式编辑器选择公式的插件,下面给大家讲一下实现过程.(擦汗,强作淡定,咳,开嗓~) 看图说话 本小菜开发功能前乐于先写个需求思维导图(纯属个人爱好): ...
- 原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
- 弹出框四 之toastr.js （完成提示框）
1.下载 toastr.js组件 2. $(function () { toastr.success('提交数据成功'); toastr.error('Error'); toastr.warning( ...
- 修改js confirm alert 提示框文字
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框
1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...
- sweetalert提示框
文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...
随机推荐
- NOIP2017+停课总结
注意 此文章禁止一切含虚伪内容的评论,违者删除评论 其删除解释权归博主所有 Part1 论yyb NOIP 如何炸裂 前言 离NOIP已有三个星期,忘却的救主快要降临了吧,我正有写一篇总结的必要了.. ...
- 【Luogu3121】审查（AC自动机）
题面 Description 农夫约翰为他的奶牛们购买了一份名字叫Good Hooveskeeping的定期杂志,因此奶牛们在挤奶期间就有了大量的阅读素材.遗憾的是在最新的一期上,有一篇有点儿不适当的 ...
- MySQL的sum()函数
如下图,这是一个关于用户参加活动,每个活动会给这位用户评分的一个表: 用户1参加了A活动,评分100: 用户2参加了B活动,评分98,又参加了D活动,评分10: 用户3参加了C活动,评分99 需求:把 ...
- JDK1.8源码(二)——java.lang.Integer 类
上一篇博客我们介绍了 java.lang 包下的 Object 类,那么本篇博客接着介绍该包下的另一个类 Integer.在前面 浅谈 Integer 类 博客中我们主要介绍了 Integer 类 和 ...
- css样式加载顺序
css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...
- WordPress博客彻底关闭图片缩略图功能的方法
最近感觉没发几篇文章,然后查看cpanel面板的时候发现不知不觉我的空间突然被占用了很多,不能忍啊,我查看了一下磁盘占用,发现是缩略图搞的鬼,我 的文章中的图片都是保存在七牛中的,只有特色图片是不能使 ...
- 【Unity3D与23种设计模式】建造者模式（Builder）
GoF中定义: "将一个复杂的构建流程与它的对象表现分离出来,让相同的构建流程可以产生不同的对象行为表现." 建造者模式可以分为两个步骤来实施: 1.将复杂的构建流程独立出来,并将 ...
- JAVA的18条BASE
关于Java的基础知识,实践证明学习OO,最终领悟“父类控制流程,子类实现具体的业务逻辑”的OO思想,需要的不是智商而是基础,也就是说,基础越好越快领悟,所以请每位S1学习Java的学员请牢记以下Ja ...
- Redis的持久化机制包括RBD和AOF两种，对于这两种持久化方式各有优势
RDB机制的策略 RDB持久化是指在指定的时间间隔内将内存中的数据和操作通过快照的方式保存到redis bin目录下的一个默认名为 dump.rdb的文件,可以通过配置设置自动的快照持久化的方式,我们 ...
- Effective Java 第三版——37. 使用EnumMap替代序数索引
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...