JQuery-Methode zum Bewegen der Maus auf ein kleines Bild, um den Effekt einer großen image_jquery anzuzeigen

Das Beispiel in diesem Artikel beschreibt, wie Sie mit JQuery die Maus auf ein kleines Bild bewegen, um den Effekt eines großen Bildes anzuzeigen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die Funktion zum Anzeigen eines großen Bildes ähnelt hier dem vorherigen Artikel „JQuery-Methode zum Implementieren des Hyperlink-Maus-Eingabeaufforderungseffekts“ Durch geringfügige Änderung des Codes können Sie einen Bildaufforderungseffekt erstellen.

Beziehen Sie sich auf den Code für den vorherigen Hyperlink-Eingabeaufforderungseffekt. Sie müssen lediglich den Code des erstellten div-Elements ändern in:

//创建 div 元素 图片提示
var tooltip = "<div id="tooltip"><img src=""+ this.href +"" alt="预览图"><\/div>"; 
</div>

Wenn die Maus über das Bild gleitet, wird auf dem Display ein großer Bildaufforderungseffekt angezeigt. Um den Effekt humaner zu gestalten, ist es außerdem erforderlich, dem Bild einen Beschreibungstext hinzuzufügen, dh der entsprechende Einführungstext des Bildes erscheint unterhalb des großen Bildes, das angezeigt wird.

Sie können den entsprechenden Einführungstext des Bildes basierend auf dem Titelattributwert des Hyperlinks abrufen. Der JQuery-Code lautet wie folgt:

this.myTitle = this.title; 
this.title = "";  
var imgTitle = this.myTitle&#63; "<br />" + this.myTitle : "";

Dann hängen Sie es mit dem folgenden Code an das div-Element an:

// 创建 div 元素
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; 

Bei der Beurteilung, ob this.myTitle „“ ist, wird eine ternäre Operation verwendet. Die ternäre Operationsstruktur ist: Boolescher Wert 1: Wert 2. Sein erster Parameter muss ein boolescher Wert sein. Selbstverständlich können ternäre Operationen auch durch „if(){ }else{ }“ ersetzt werden, zum Beispiel:

var imgTitle; 
if (this.myTitle) { 
  imgTitle = "<br />" + this.myTitle; 
} else { 
  imgTitle = ""; 
}

Auf diese Weise ist der Bildaufforderungseffekt abgeschlossen. Wenn die Maus über das Bild fährt, wird eine große Vorschau des Bildes angezeigt und unter dem großen Bild wird ein Einführungstext angezeigt.

Der vollständige Code für dieses Beispiel lautet wie folgt:

<script type="text/javascript">
//<![CDATA[
$(function(){
  var x = 10;
  var y = 20;
  $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title;
    this.title = "";  
    var imgTitle = this.myTitle&#63; "<br/>" + this.myTitle : "";
    var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='预览图'/>"+imgTitle+"<\/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(); //移除 
 }).mousemove(function(e){
    $("#tooltip")
      .css({
        "top": (e.pageY+y) + "px",
        "left": (e.pageX+x) + "px"
      });
  });
})
//]]>
</script>

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