JavaScript实现短暂提示框功能
时间:2019-04-13
本文章向大家介绍JavaScript实现短暂提示框功能,主要包括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实现短暂提示框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 干货 | Elasticsearch5.X Mapping万能模板
- MySQL 5.7安装部署总结(r10笔记第77天)
- Go语言中Socket通信TCP服务端
- MySQL和Oracle的添加字段的处理差别 (r10笔记第73天)
- MySQL修改数据类型的问题总结(r10笔记第74天)
- 深究|Elasticsearch单字段支持的最大字符数?
- Go语言中Socket通信之Tcp客户端
- Oracle 12c PDB迁移及ORA-00600错误分析和解决(r10笔记第72天)
- 【Go 语言社区】epoll详解
- Oracle 12c数据库升级实战(r10笔记第70天)
- Oracle 12c升级检查问题分析(r10笔记第69天)
- 转--使用Revel(go)开发网站
- GoldenGate数据迁移的问题总结(二)(r10笔记第85天)
- Elasticsearch究竟要设置多少分片数?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浏览器在线预览offce,vue-pdf预览pdf文件
- vivo商城前端架构升级-总览篇
- 《JSON笔记之三》---postman中传入json串
- Spring源码学习笔记(13)——JDBC
- java系列之注解
- NodeJs初入Http模块和Url模块
- Spring系列之实例化、初始化处理器
- NodeJs安装supervisor实现重载
- MyBatis系列之浅谈SQL执行流程分析
- NodeJs引入自定义模块
- NodeJs引入操作第三方插件
- RocketMQ 环境搭建
- ThreadLocal源码分析
- ThreadPoolExecutor详解
- 接口测试框架实战 | 流程封装与基于加密接口的测试用例设计