jQuery erkennt den Effekt der Vorschau des großen Bildes, wenn die Maus darüber fährt

Dieser Artikel stellt hauptsächlich die Methode von jQuery vor, um den Effekt einer groß angelegten Vorschau der Maus über das Bild zu erzielen, einschließlich der Reaktion auf jQuery-Mausereignisse und der dynamischen Bedienung von Seitenelementattributen Ich hoffe, es kann allen helfen.

Das Beispiel in diesem Artikel beschreibt die jQuery-Methode, um den Effekt einer großformatigen Vorschau von Bildern zu erzielen, wenn die Maus darüber bewegt wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Anforderungen lauten wie folgt: Auf dem Bild, auf dem die Maus bewegt wird, wird gleichzeitig die Vorschau des großen Bildes angezeigt Wenn die Maus wegbewegt wird, wird sie ausgeblendet.

Das Prinzip ist eigentlich sehr einfach. Zuerst benötigen Sie ein p, fügen dann das Tag dynamisch über die jQuery-Methode hinzu, ändern den Stil (Breite, Höhe) dieses der Pfad des Bildes, das angezeigt werden soll.

JS-Code:

$(function(){
  var ei = $("#large");
  ei.hide();
  $("#img1, img").mousemove(function(e){
    ei.css({top:e.pageY,left:e.pageX}).html(&#39;<img style="border:1px solid gray;" src="&#39; + this.src + &#39;" />&#39;).show();
  }).mouseout( function(){
    ei.hide();
  })
  $("#f1").change(function(){
    $("#img1").attr("src","file:///"+$("#f1").val());
  })
});

HTML-Teil:

上传预览图片:<br>
<input id="f1" name="f1" type="file" /><br>
<img id="img1" width="120" height="60" src="logo-jq.gif">
<p id="large"></p>
鼠标滑过预览图片:<br>
<img width="120" height="60" src="logo-jq.gif"><br>

Verwandte Empfehlungen:

JavaScript-Vorschaubildfunktion ermöglicht aktualisierungsfreies Hochladen

PHP einfache Möglichkeit, ein Videovorschaubild zu erhalten

JS realisiert E-Commerce Touch-Bildvergrößerungseffekt

Das obige ist der detaillierte Inhalt vonjQuery erkennt den Effekt der Vorschau des großen Bildes, wenn die Maus darüber fährt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!