jQuery réalise l'effet d'un aperçu d'une grande image lorsque la souris passe sur Picture_jquery

jQuery : C'est une technologie côté client. La raison de sa naissance est : écrire moins, faire plus (écrire moins de code, faire plus de choses).

Par conséquent, nous pouvons utiliser jQuery pour obtenir un effet très cool. , comparé à javaScript, il a le même effet, mais un code très simple. Le point de connaissance principal de jQuery est l'utilisation des sélecteurs. Je résumerai le contenu des sélecteurs dans un prochain blog. J'espère que tout le monde le lira. Apprendre le sélecteur équivaut à maîtriser pleinement jQuery.

Cet article de blog explique comment utiliser jQuery pour implémenter une fonctionnalité commune que nous voyons sur les sites Web commerciaux : lorsque la souris passe sur le numéro de l'image, l'image sera agrandie pour un aperçu. Ensuite, je vais coller le code principal : d'abord, le code dans $(function(){})

Copier le code code As suit :

var x = 5;
var y = 15;
$("table tr td img").mousemove(function(e) {
$(" #imageTip").attr("src", this.src)//Définissez le chemin de l'image d'invite
.css({
"top" : (e.pageY y) "px",
" left" : (e.pageX (function(){
$("#imageTip").hide();//Masquer l'image

});


Code de mise en page suivante :

Copier le code

Le code est le suivant :

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


td>
;/table>

Options
< /td>			< img src="images/xiao02.jpg" alt="">	Lin Xiao
	Gong Ming

type ="checkbox" id= "checkAll">Sélectionner tout id="btnDel" type="button" value="Supprimer"> 🎜>

"clsImg" id= "imageTip">


Ici, il vous suffit de faire attention à l'écriture de la dernière ligne de code à gauche. Ce qui précède n’est que la disposition du tableau.

Vient ensuite le css :




Copiez le code


Le code est le suivant :


corps {

taille de police : 12px;
}

table tr td img {
bordure : solide 1px #666

largeur : 240px hauteur ; : 240px; remplissage : 3px ; curseur : main } .clsImg {

position :

bordure : 1px #ccc
largeur : 400px ;
hauteur : 400px ;
affichage : aucun
}