91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript實現短暫提示框功能的方法

發布時間:2021-04-12 12:40:07 來源:億速云 閱讀:147 作者:小新 欄目:web開發

這篇文章主要介紹了JavaScript實現短暫提示框功能的方法,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

業務場景:當鼠標移入某元素時,顯示提示框進行介紹。當鼠標移除時,會自動消失。引入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實現短暫提示框功能的方法”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

文成县| 四平市| 阿克陶县| 抚松县| 固始县| 凤凰县| 东明县| 建昌县| 元谋县| 微山县| 偏关县| 巫溪县| 龙井市| 舒城县| 昌都县| 胶南市| 宁南县| 宜兴市| 荔波县| 五河县| 宁津县| 龙州县| 勐海县| 洛扎县| 庆城县| 开远市| 绥江县| 马尔康县| 东兴市| 崇州市| 东乡县| 孝感市| 苍南县| 库车县| 定结县| 禹州市| 济阳县| 濮阳市| 铁力市| 桃园县| 确山县|