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

首先需要知道jq創建dom元素語法；$(html標簽)，例如這里創建了一個img標簽var img = $("<img class='changePhoto'></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;}