這篇文章主要介紹了JavaScript實(shí)現(xiàn)短暫提示框功能的方法,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、阿克塞哈薩克族自治網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為阿克塞哈薩克族自治等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
業(yè)務(wù)場景:當(dāng)鼠標(biāo)移入某元素時(shí),顯示提示框進(jìn)行介紹。當(dāng)鼠標(biāo)移除時(shí),會(huì)自動(dòng)消失。引入ToolTip.js和ToolTip.css
主方法:ToolTip.show(需要提示的元素id, 隨意不重復(fù)即可, 要提示的html文本, 寬(可不指定), 高(可不指定));
ToolTip.show(obj, id, html, width, height);
效果如下:
1.顯示文本:
2:顯示圖片
3:顯示網(wǎng)站
js代碼:F:\Html5\Plugins\ToolTip\js\ToolTip.js
(function () { var ToolTip = {}; /** * 顯示函數(shù) */ ToolTip._showTip = function (parentId, childId, html, width, height) { var parent = document.getElementById(parentId)//要提示的元素 var child = document.getElementById(childId); if (child === null) {//創(chuàng)建 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"; } }, /** * 調(diào)用入口 */ 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; })();//為防止污染,將方法寫在匿名函數(shù)中
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> //調(diào)用方式 ToolTip.show("tooltip-text", "01", "唐詩泛指創(chuàng)作于唐朝的詩" + "。唐詩是中華民族最珍貴的文化遺產(chǎn)之一,是" + "中華文化寶庫中的一顆明珠," + "同時(shí)也對(duì)世界上許多民族和國家的文化發(fā)展產(chǎn)生了很大影響," + "對(duì)于后人研究唐代的政治、民情、風(fēng)俗、" + "文化等都有重要的參考意義和價(jià)值。",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; }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JavaScript實(shí)現(xiàn)短暫提示框功能的方法”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
本文標(biāo)題:JavaScript實(shí)現(xiàn)短暫提示框功能的方法
分享路徑:http://www.muchs.cn/article24/ijscje.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、全網(wǎng)營銷推廣、企業(yè)網(wǎng)站制作、網(wǎng)站營銷、企業(yè)建站、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)