滑鼠移至上方小表徵圖顯示大表徵圖，滑鼠移至上方表徵圖

滑鼠移至上方小表徵圖顯示大表徵圖，滑鼠移至上方表徵圖

頁面元素為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;}

您可能感興趣的文章:

• 網頁中移動的廣告效果 滑鼠移至上方
• CSS滑鼠移至上方菜單 圖片交換技術實現
• javascript實現的滑鼠移至上方時動態翻滾的導航條
• hover的用法及live的用法介紹(滑鼠移至上方效果)
• 一個簡單的JS滑鼠移至上方特效具體方法
• jQuery當滑鼠移至上方時放大圖片的效果執行個體
• jQuery實現列表自動迴圈滾動滑鼠移至上方時停止滾動
• jQuery實現滑鼠移至上方顯示提示資訊視窗的方法