Heim > Web-Frontend > js-Tutorial > JS implementiert die Aufbewahrungsaufforderungsbox-Funktion

JS implementiert die Aufbewahrungsaufforderungsbox-Funktion

php中世界最好的语言
Freigeben: 2018-04-20 11:01:12
Original
1014 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen JS mit, um die Funktion „Stuck-Prompt-Box“ zu implementieren. Geschäftsszenario: Wenn die Maus in ein Element bewegt wird, wird ein Eingabeaufforderungsfeld zur Einführung angezeigt. Es verschwindet automatisch, wenn die Maus entfernt wird. Einführung von ToolTip.js und ToolTip.css

Hauptmethode: ToolTip.show (ID des Elements, das abgefragt werden muss, solange es nicht wiederholt wird, anzufordernder HTML-Text, Breite (optional), height (optional) );

ToolTip.show(obj, id, html, width, height);

Der Effekt ist wie folgt:

1.

2: Bilder anzeigen

3: Website anzeigen

js-Code: F ; >

Ich glaube, ich habe es gesehen. Sie beherrschen die Methode in diesem Artikel. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:
(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("p");
  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;
})();//为防止污染,将方法写在匿名函数中
Nach dem Login kopieren

Was Anfänger über vue-cli 3.0 wissen müssen
<!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>
<p 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>
</p>
<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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
D3.js, um einen dynamischen Wähleffekt zu erzielen

Detaillierte Schritte zur AngularJS-Anwendungsmodularisierung

Das obige ist der detaillierte Inhalt vonJS implementiert die Aufbewahrungsaufforderungsbox-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage