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

首先需要知道jq創(chuàng)建dom元素語法；$(html標(biāo)簽)，例如這里創(chuàng)建了一個img標(biāo)簽var img = $("<img class='changePhoto'></img>");

其次鼠標(biāo)的懸停與離開這里使用的是hover方法，語法為$(selector).hover(inFunction,outFunction)，
規(guī)定當(dāng)鼠標(biāo)指針懸停在被選元素上時要運(yùn)行的兩個函數(shù)。其中inFunction是必須的，outFunction是可選的。

該方法觸發(fā) mouseenter 和 mouseleave 事件。

注意：如果只規(guī)定了一個函數(shù)，則它將會在 mouseenter 和 mouseleave 事件上運(yùn)行。

這里定義inFunction為確定大圖片的位置，outFunction為remove創(chuàng)建的img節(jié)點(diǎn)。

1）只創(chuàng)建對象是不夠的，還需要將創(chuàng)建的對象添加到文檔節(jié)點(diǎn)中去，jq中使用的方法為

append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容

應(yīng)用在這里則為先給該img賦值，再append：

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

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

第二個是本次創(chuàng)建的目標(biāo)元素，這里是img，第三個是目標(biāo)元素可以出現(xiàn)的區(qū)域元素，一般是一個很大的元素，這里是table的父元素div，$(".fatherDiv")

因此，具體的方法為，

function getPosition($element, img, $(".fatherDiv"){
var top = $element.position().top + $element.height();//得到top：參照元素的top + 參照元素本身的height。
var maxBottom = $(".fatherDiv").height();//得到區(qū)域元素的height。
var minTop = 40;
if (top + img.height() > maxBottom) {
top = $element.position().top - img.height();
}
if (top < minTop) {//兩個if判斷，保證無論怎么劃動鼠標(biāo)的滑輪，目標(biāo)元素始終出現(xiàn)在屏幕上。
top = minTop;
}
var $firstElement = $($(".fatherDivtbody tr")[0]);
img.css('top',top - $firstElement.position().top + 40);
}

3）remove創(chuàng)建的對象；$element.remove();

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

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

最新評論