jQuery erkennt den Effekt einer großen Bildvorschau, wenn die Maus über picture_jquery fährt

jQuery: Es handelt sich um eine clientseitige Technologie: Weniger schreiben, mehr tun (weniger Code schreiben, mehr Dinge tun)

Daher können wir mit jQuery einen sehr coolen Effekt erzielen Im Vergleich zu JavaScript hat es den gleichen Effekt, aber sehr einfachen Code. Der Kernwissenspunkt in jQuery ist die Verwendung von Selektoren. Ich hoffe, dass das Erlernen des Selektors dem vollständigen Beherrschen von jQuery entspricht.

In diesem Blogbeitrag geht es darum, wie man mit jQuery eine gemeinsame Funktion implementiert, die wir auf Shopping-Websites sehen: Wenn die Maus über die Bildnummer fährt, wird das Bild zur Vorschau vergrößert. Als nächstes füge ich den Hauptcode ein: Zuerst den Code in $(function(){})

Code kopierenCode As folgt:

var x = 5;
var y = 15;
$("table tr td img").mousemove(function(e) {
$(" #imageTip").attr("src", this.src)//Legen Sie den Pfad des Eingabeaufforderungsbilds fest
.css({
"top" : (e.pageY y) "px",
" left" : (e.pageX (function(){
$("#imageTip").hide();//Bild ausblenden

});


Code für das Layout der nächsten Seite:

Code kopieren

Der Code lautet wie folgt: < ;tr>Optionen

;/tr>
< ;tr id="1"> 🎜>

td> ;/table>

< /td> < td>		< img src="images/xiao02.jpg" alt="">

Alle auswählen id="btnDel" type="button" value="Delete"> 🎜>

"clsImg" id= "imageTip">


Hier müssen Sie nur auf das Schreiben der letzten Codezeile auf der linken Seite achten. Das Obige ist nur das Layout der Tabelle.

Als nächstes kommt das CSS:




Kopieren Sie den Code


Der Code lautet wie folgt:


Körper {
Schriftgröße: 12px
}

Tabelle tr td img {
Breite: 240px;
Höhe : 240px;
padding: 3px;
}

.clsImg {
border: 1px #ccc solid; Breite: 400px;
Höhe: 400px
Anzeige: keine

}