Afficher de grandes icônes lorsque vous survolez de petites icônes avec les astuces mouse_javascript

L'élément de page est div->table->tr->td. Pour les images en td, la grande image sera affichée lorsque la souris la survolera, et la grande image disparaîtra lorsque la souris sera placée dessus. à gauche :

Vous devez d'abord connaître la syntaxe de jq pour créer des éléments dom ; $(balise html), par exemple, une balise img est créée ici var img = $("c2049fa585fa020a016252fc10756a297e3ea2b661481ad67e0d201a6699fd14");

Deuxièmement, la méthode hover est utilisée pour survoler et quitter la souris. La syntaxe est $(selector).hover(inFunction,outFunction),
Spécifie deux fonctions à exécuter lorsque le pointeur de la souris survole l'élément sélectionné. Parmi eux, inFunction est obligatoire et outFunction est facultatif.

Cette méthode déclenche les événements mouseenter et mouseleave.

Remarque : si une seule fonction est spécifiée, elle s'exécutera sur les événements mouseenter et mouseleave.

Ici, inFunction est défini pour déterminer la position de la grande image, et outFunction est le nœud img créé par Remove.

1) Il ne suffit pas de créer un objet. Vous devez également ajouter l'objet créé au nœud du document. La méthode utilisée dans jq est

.

append() - Insère du contenu à la fin de l'élément sélectionné
prepend() - Insère du contenu
au début de l'élément sélectionné after() - Insère du contenu après l'élément sélectionné
before() - Insère du contenu avant l'élément sélectionné

Pour postuler ici, attribuez d'abord une valeur à l'image, puis ajoutez :

img.attr("src", $element.find(".prePhoto").attr("src"));
$element.append(img);

2) Lors de la détermination de la position de la grande image, trois paramètres sont nécessaires. Le premier est l'élément de référence. Ici, l'élément parents de td est sélectionné, tr : var $element = $(this).parents(. "tr").

Le deuxième est l'élément cible créé cette fois, voici img, le troisième est l'élément de zone où l'élément cible peut apparaître, généralement un grand élément, voici l'élément parent div de la table, $(". FatherDiv ")

Par conséquent, la méthode spécifique est,

function getPosition($element, img, $(".fatherDiv"){
var top = $element.position().top + $element.height();//得到top：参照元素的top + 参照元素本身的height。
var maxBottom = $(".fatherDiv").height();//得到区域元素的height。
var minTop = 40;
if (top + img.height() > maxBottom) {
top = $element.position().top - img.height();
}
if (top < minTop) {//两个if判断，保证无论怎么划动鼠标的滑轮，目标元素始终出现在屏幕上。
top = minTop;
}
var $firstElement = $($(".fatherDivtbody tr")[0]);
img.css('top',top - $firstElement.position().top + 40);
}

3) Supprimez l'objet créé ; $element.remove();

4) Le CSS de l'élément cible doit remplir certaines conditions : position:absolute

.changePhoto {
position: absolute;
width: 120px;
height: 160px;
left: 300px;
right: 10px;
float: right;
z-index: 9;
}