JS implémente la fonction de boîte d'invite de rétention-js tutoriel-php.cn

Maison

interface Web

js tutoriel

JS implémente la fonction de boîte d'invite de rétention

Apr 20, 2018 am 11:01 AM

javascript 功能提示

Cette fois, je vais vous amener JS pour implémenter la fonction de boîte d'invite bloquée. Quelles sont les précautions pour implémenter la fonction de boîte d'invite bloquée dans JS Voici un cas pratique, jetons un coup d'œil.

Scénario métier : lorsque la souris se déplace dans un élément, une boîte de dialogue s'affiche pour l'introduction. Il disparaîtra automatiquement lorsque la souris sera retirée. Introduisez ToolTip.js et ToolTip.css

Méthode principale : ToolTip.show (identifiant de l'élément qui doit être invité, tant qu'il n'est pas répété, texte html à inviter, largeur (facultatif), height (facultatif) );

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

L'effet est le suivant :

Afficher le texte :

2 : Afficher les images

3 : Afficher le site Web

code js : F ; >

Je crois l'avoir vu. Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

(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 &gt; 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;
})();//为防止污染，将方法写在匿名函数中

Copier après la connexion

Lecture recommandée :

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;提示框&lt;/title&gt;
 &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;ToolTip.css&quot; rel=&quot;external nofollow&quot; &gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p class=&quot;ui-tooltip-demo&quot;&gt;
 &lt;p&gt;&lt;a class=&quot;ui-tooltip&quot; id=&quot;tooltip-text&quot;&gt;唐诗&lt;/a&gt;&lt;/p&gt;
 &lt;p&gt;&lt;a class=&quot;ui-tooltip&quot; id=&quot;tooltip-photo&quot;&gt;背景图片&lt;/a&gt;&lt;/p&gt;
 &lt;p&gt;&lt;a class=&quot;ui-tooltip&quot; id=&quot;tooltip-poem&quot;&gt;Yi人诗社&lt;/a&gt;&lt;/p&gt;
&lt;/p&gt;
&lt;script src=&quot;js/ToolTip.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
//调用方式
 ToolTip.show("tooltip-text", "01", "唐诗泛指创作于唐朝的诗" +
 "。唐诗是中华民族最珍贵的文化遗产之一，是" +
 "中华文化宝库中的一颗明珠，" +
 "同时也对世界上许多民族和国家的文化发展产生了很大影响，" +
 "对于后人研究唐代的政治、民情、风俗、" +
 "文化等都有重要的参考意义和价值。",300,90);
 ToolTip.show("tooltip-photo", "02", "&lt;img src=\&quot;imgs/bg.jpg\&quot; height=\&quot;80px\&quot;&gt;",150,80);
 var html='&lt;iframe src=&quot;http://www.toly.top&quot; width=&quot;480px&quot; height=&quot;300px&quot;/&gt;'
 ToolTip.show("tooltip-poem", "03", html);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Ce que les novices doivent savoir sur vue-cli 3.0

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;
}

Copier après la connexion

D3.js implémente des effets de cadran dynamique

Étapes détaillées pour la modularisation de l'application AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn