Zeigen Sie mit den Tipps von „mouse_javascript“ große Symbole an, wenn Sie mit der Maus über kleine Symbole fahren

Das Seitenelement ist div->table->tr->td. Bei Bildern in td wird das große Bild angezeigt, wenn die Maus darüber bewegt wird, und das große Bild verschwindet, wenn die Maus darüber bewegt wird links:

Zuerst müssen Sie die Syntax von jq kennen, um Dom-Elemente $(html-Tag) zu erstellen. Hier wird beispielsweise ein IMG-Tag erstellt. var img = $("c2049fa585fa020a016252fc10756a297e3ea2b661481ad67e0d201a6699fd14");

Zweitens wird die Hover-Methode zum Bewegen und Verlassen der Maus verwendet. Die Syntax lautet $(selector).hover(inFunction,outFunction),
Gibt zwei Funktionen an, die ausgeführt werden sollen, wenn sich der Mauszeiger über dem ausgewählten Element befindet. Darunter ist inFunction erforderlich und outFunction optional.

Diese Methode löst Mouseenter- und Mouseleave-Ereignisse aus.

Hinweis: Wenn nur eine Funktion angegeben ist, wird sie bei Mouseenter- und Mouseleave-Ereignissen ausgeführt.

Die hier definierte inFunction dient dazu, die Position des großen Bildes zu bestimmen, und outFunction ist der durch Entfernen erstellte IMG-Knoten.

1) Es reicht nicht aus, nur ein Objekt zu erstellen. Sie müssen das erstellte Objekt auch zum Dokumentknoten hinzufügen. Die in jq verwendete Methode ist

append() – Inhalt am Ende des ausgewählten Elements einfügen
prepend() – Inhalt
am Anfang des ausgewählten Elements einfügen after() – Inhalt nach dem ausgewählten Element
einfügen before() – Inhalt vor dem ausgewählten Element

einfügen

Um sich hier zu bewerben, weisen Sie dem img zunächst einen Wert zu und hängen Sie dann Folgendes an:

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

2) Bei der Bestimmung der Position des großen Bildes werden drei Parameter benötigt. Der erste ist das Referenzelement. Hier wird das Elternelement von td ausgewählt, tr: var $element = $(this).parents(. „tr“) .

Das zweite ist das diesmal erstellte Zielelement, hier ist img, das dritte ist das Bereichselement, in dem das Zielelement erscheinen kann, normalerweise ein großes Element, hier ist das übergeordnete Element div der Tabelle, $(". FatherDiv ")

Daher lautet die spezifische Methode:

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) Entfernen Sie das erstellte Objekt; $element.remove();

4) Das CSS des Zielelements muss einige Bedingungen erfüllen: position:absolute

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