Das Beispiel in diesem Artikel beschreibt, wie jquery die Methode implementiert, ein großes Bild anzuzeigen, wenn die Maus über ein kleines Bild gleitet. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt: Code kopieren Der Code lautet wie folgt: <br> li{list-style:none;float:left;margin-left:10px;}<br> <br> var data = {<br> "images/11_s.jpg":["images/11_b.jpg","美人1"],<br> "images/22_s.jpg":["images/22_b.jpg","美人2"],<br> "images/33_s.jpg":["images/33_b.jpg","美人3"],<br> "images/44_s.jpg":["images/44_b.jpg","美人4"]<br> };<br> $(function(){<br> $.each(data,function(key,value){<br> //Das letzte auszublendende Div initialisieren <br> $("div").last().hide();<br> //Kleinen Diagrammknoten erstellen<br> var smallPath = $("<img src='" key "' />").css({"margin": "5px", "padding": "2px", "border": "1px solid #000 "});<br> //Legen Sie die Adresse und den Namen des großen Bildes fest<br> bigImgPath = smallPath.attr("bigMapPath",value[0]);<br> bigImgName = smallPath.attr("bigMapName",value[1]); <p> $("div").first().append(smallPath);</p> <p> //Ereignisse zur Miniaturansicht hinzufügen<br> smallPath.mouseover(function(){<br> //Der letzte Div-Einblendeffekt<br> $("div").last().fadeIn("fast");<br> //Erhalten Sie die Gesamtadresse<br> $("#show").attr("src",$(this).attr("bigMapPath"));<br> //Den Namen des großen Bildes abrufen und den Stil festlegen <br> $("#imgTitle").text($(this).attr("bigMapName")).css({"background":"#ebf1de", "padding": "10px", "margin-bottom": 10px"});<br> });<br> smallPath.mouseout(function(){<br> $("div").last().fadeOut("fast");<br> });<br> });<br> });<br>
