Paparkan ikon besar apabila melayang ikon kecil dengan petua mouse_javascript

Elemen halaman ialah div->table->tr->td Untuk gambar dalam td, gambar besar akan dipaparkan apabila tetikus melayang di atasnya dan gambar besar akan hilang apabila tetikus berada. kiri:

Mula-mula anda perlu mengetahui sintaks jq untuk mencipta elemen dom $(teg html), sebagai contoh, teg img dicipta di sini var img = $("< /img>");

Kedua, kaedah hover digunakan untuk melayang dan meninggalkan tetikus Sintaks ialah $(selector).hover(inFunction,outFunction),
. Menentukan dua fungsi untuk dijalankan apabila penuding tetikus melayang di atas elemen yang dipilih. Antaranya, inFunction diperlukan dan outFunction adalah pilihan.

Kaedah ini mencetuskan peristiwa masuk tetikus dan meninggalkan tetikus.

Nota: Jika hanya satu fungsi ditentukan, ia akan dijalankan pada acara mouseenter dan mouseleave.

Di sini ditakrifkan inFunction ialah untuk menentukan kedudukan gambar besar, dan outFunction ialah nod img yang dicipta dengan keluarkan.

1) Tidak cukup dengan hanya mencipta objek Anda juga perlu menambah objek yang dibuat pada nod dokumen Kaedah yang digunakan dalam jq ialah

tambah() - Sisipkan kandungan di hujung elemen yang dipilih
prepend() - Masukkan kandungan
pada permulaan elemen yang dipilih after() - Masukkan kandungan selepas elemen yang dipilih
before() - Sisipkan kandungan sebelum elemen yang dipilih

Untuk memohon di sini, tetapkan nilai pada img dahulu, dan kemudian tambahkan:

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

2) Semasa menentukan kedudukan gambar besar, tiga parameter yang pertama ialah elemen rujukan Di sini, elemen ibu bapa td dipilih, tr: var $element = $(this).parents(. "tr") ).

Yang kedua ialah elemen sasaran yang dicipta kali ini, inilah img, yang ketiga ialah elemen kawasan di mana elemen sasaran boleh muncul, biasanya elemen besar, berikut ialah div elemen induk jadual, $(". fatherDiv ")

Oleh itu, kaedah khusus ialah,

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) Alih keluar objek yang dibuat; $element.remove();

4) css elemen sasaran perlu memenuhi beberapa syarat: kedudukan:mutlak

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