滑鼠懸停小圖示顯示大圖示_javascript技巧

頁面元素為div->table->tr->td，對於td中的圖片，滑鼠懸停上則顯示大圖片，滑鼠離開則大圖片消失：

首先需要知道jq建立dom元素語法；$(html標籤)，例如這裡建立了一個img標籤var img = $("");

其次滑鼠的懸停與離開這裡使用的是hover方法，語法為$(selector).hover(inFunction,outFunction)，
規定當滑鼠指標懸停在被選元素上時要執行的兩個函數。其中inFunction是必須的，outFunction是可選的。

此方法觸發 mouseenter 和 mouseleave 事件。

注意：如果只規定了一個函數，則它將會在 mouseenter 和 mouseleave 事件上運行。

這裡定義inFunction為決定大圖片的位置，outFunction為remove所建立的img節點。

1）只建立物件是不夠的，還需要將建立的物件加入文件節點中去，jq中使用的方法為

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容

應用在這裡則為先給該img賦值，​​再append：

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

2）確定大圖片位置的時候，需要三個參數，第一個是參考元素，這裡選的是td的parents元素，tr：var $element = $(this).parents("tr") 。

第二個是這次建立的目標元素，這裡是img，第三個是目標元素可以出現的區域元素，通常是一個很大的元素，這裡是table的父元素div，$(". fatherDiv")

因此，具體的方法為，

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）remove所建立的物件；$element.remove();

4) 目標元素的css需要滿足一些條件：position:absolute

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