Heim > Artikel > Web-Frontend > Beispiel für die Implementierung der ToolTip-Elementpositionierungs- und Anzeigefunktion in jQuery

Beispiel für die Implementierung der ToolTip-Elementpositionierungs- und Anzeigefunktion in jQuery

高洛峰Original: 2016-12-05 15:34:301127Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery die Positionierungs- und Anzeigefunktion von ToolTip-Elementen implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
  function ShowTip(event,obj,message)
  {
   var xOffset = -10; // x distance from mouse
   var yOffset = 10; // y distance from mouse
   //obj.style.top = (event.clientX + yOffset)+"px";
   //obj.style.left = (event.clientY + xOffset)+"px";
   //获取元素width: $(obj).width();
   //获取元素height：$(obj).height()
   //获取元素位置：$(obj).position().top和$(obj).offset().top
   $(&#39;body&#39;).append( &#39;<div id="tipmessage">&#39;+message+&#39;</div>&#39;);
   $(&#39;div#tipmessage&#39;).css("top", $(obj).position().top+$(obj).height() + "px").css("left", $(obj).position().left+"px").fadeIn("slow");
  }
  function HideTip()
  {
   $("div#tipmessage").fadeOut("slow").remove();
  }
 </script>
 <style type="text/css">
  #tipmessage
  {
  display:none;
  z-index:1000;
  border:1px solid #448833;
  position:absolute;
  background:#ffffff;
  max-width:200px;
  max-height:30px;
  padding:5px 10px;
  }
</style>
</head>
<body>
<a href="#" onmouseover="ShowTip(event,this,&#39;欢迎访问PHP中文网&#39;)" onmouseout="HideTip()">Tip</a>
</body>
</html>

Stellungnahme：

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

Vorheriger Artikel：Reiner JS-Code, um interlaced Farbwechsel und Hervorhebungen zu realisieren, wenn die Maus hinein bewegt wirdNächster Artikel：Reiner JS-Code, um interlaced Farbwechsel und Hervorhebungen zu realisieren, wenn die Maus hinein bewegt wird

In Verbindung stehende Artikel

Mehr sehen