JavaScript实现短暂提示框功能的方法
这篇文章主要介绍了JavaScript实现短暂提示框功能的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联公司专注于企业全网整合营销推广、网站重做改版、阿克塞哈萨克族自治网站定制设计、自适应品牌网站建设、HTML5、购物商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为阿克塞哈萨克族自治等各大城市提供网站开发制作服务。
业务场景:当鼠标移入某元素时,显示提示框进行介绍。当鼠标移除时,会自动消失。引入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
提示框
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实现短暂提示框功能的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
当前标题:JavaScript实现短暂提示框功能的方法
转载来于:http://myzitong.com/article/ijscje.html