Die JQuery-Methode implementiert den Hyperlink-Maus-Eingabeaufforderungseffekt_jquery

Das Beispiel in diesem Artikel beschreibt, wie JQuery den Mausaufforderungseffekt von Hyperlinks implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Der Browser verfügt tatsächlich bereits über eine Hyperlink-Eingabeaufforderung. Sie müssen nur das Titelattribut zum Hyperlink hinzufügen. Allerdings ist die Reaktionsgeschwindigkeit dieses Prompt-Effekts mit einer Verzögerung von etwa 1 Sekunde sehr langsam. Was wir jetzt brauchen, ist, dass eine Eingabeaufforderung erscheint, sobald die Maus über den Hyperlink bewegt wird. Zu diesem Zeitpunkt müssen Sie den Titel-Eingabeaufforderungseffekt im a-Tag entfernen und selbst eine Eingabeaufforderung mit ähnlichen Funktionen erstellen.

HTML-Design ist wie folgt:

Code kopieren Der Code lautet wie folgt:

Willkommen im Script House

Fügen Sie dann Mouseover- und Mouseout-Ereignisse für den Hyperlink mit dem Klassen-Tooltip hinzu:

$("a.tooltip").mouseover(function (){
    //显示 title
}).mouseout(function (){
    //隐藏 title
});

Die konkreten Ideen, um diesen Effekt zu erzielen, sind wie folgt:

1. Wenn die Maus in den Hyperlink gleitet, erstellen Sie ein div-Element, und der Inhalt des div-Elements ist der Wert des Titelattributs. Das erstellte Element wird dann an das Dokument angehängt. Legen Sie die X- und Y-Koordinaten dafür fest, sodass es neben der Mausposition angezeigt wird.
2. Wenn die Maus aus dem Hyperlink herausgleitet, entfernen Sie das div-Element.

Schreiben Sie entsprechend den Analyseideen den folgenden JQuery-Code:

$(function(){
  var x = 10;
  var y = 20;
  $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title;
    this.title = "";
    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
    //创建 div 元素
    $("body").append(tooltip); //把它追加到文档中
    $("#tooltip")
      .css({
        "top": (e.pageY + y) + "px",
        "left": (e.pageX + x) + "px"
      }).show("fast"); //设置x坐标和y坐标，并且显示
  }).mouseout(function(){
    this.title = this.myTitle;
    $("#tooltip").remove(); //移除
  });
});

Zu diesem Zeitpunkt gibt es zwei Probleme mit dem Effekt: Erstens wird beim Überfahren mit der Maus auch die Eingabeaufforderung für das Titelattribut im a-Tag angezeigt. Zweitens ist das Problem beim Festlegen der x-Koordinate und der y-Koordinate fällig auf den Abstand zwischen der selbst erstellten Eingabeaufforderung und der Maus. Ein zu geringer Abstand kann manchmal zu Problemen führen, z. B. dass keine Eingabeaufforderung möglich ist (die Änderung des Mausfokus führt zu einem Mouseout-Ereignis).

Um die Titelaufforderungsfunktion im a-Tag zu entfernen, müssen Sie die folgenden Schritte ausführen:

1. Wenn die Maus hineingleitet, fügen Sie dem Objekt ein neues Attribut hinzu, übergeben Sie den Wert von title an dieses Attribut und löschen Sie dann den Wert des Attributs title.

this.myTitle = this.title;
s.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
//创建 div 元素

2. Wenn die Maus herausgleitet, wird der Wert des myTitle-Attributs des Objekts dem Attributtitel zugewiesen.

Code kopieren Der Code lautet wie folgt:

this.title = this.myTitle;

Warum sollte der Attributwert dem Attributtitel zugewiesen werden, wenn die Maus herausgleitet? Denn wenn die Maus herausgleitet, muss beim erneuten Hineinschieben der Wert des Attributs title berücksichtigt werden. Wenn der Wert von myTitle nicht dem Titelattribut neu zugewiesen wird, ist der Wert von title leer, wenn die Maus wieder hineingleitet.

Um das zweite Problem zu lösen, müssen Sie die oberen und linken Werte des Eingabeaufforderungselements zurücksetzen. Der Code lautet wie folgt, indem Sie 10 Pixel nach oben und 20 Pixel nach links hinzufügen:

var x = lO;
var y = 20;
$("#tooltip").css({
    "top": (e.pageY+y) + "px",
    "left": (e.pageX+x) + "px"
});

OK, das Problem ist hier gelöst und der Maus-Hyperlink-Eingabeaufforderungseffekt wird realisiert.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.