Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 16:52:40
Original
1259 Leute haben es durchsucht

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
}
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage