鼠標(biāo)懸停小圖標(biāo)顯示大圖標(biāo)
頁(yè)面元素為div->table->tr->td，對(duì)于td中的圖片，鼠標(biāo)懸停上則顯示大圖片，鼠標(biāo)離開(kāi)則大圖片消失：
首先需要知道jq創(chuàng)建dom元素語(yǔ)法；$(html標(biāo)簽)，例如這里創(chuàng)建了一個(gè)img標(biāo)簽var img = $("<img class='changePhoto'></img>");
其次鼠標(biāo)的懸停與離開(kāi)這里使用的是hover方法，語(yǔ)法為$(selector).hover(inFunction,outFunction)，
規(guī)定當(dāng)鼠標(biāo)指針懸停在被選元素上時(shí)要運(yùn)行的兩個(gè)函數(shù)。其中inFunction是必須的，outFunction是可選的。
該方法觸發(fā) mouseenter 和 mouseleave 事件。
注意：如果只規(guī)定了一個(gè)函數(shù)，則它將會(huì)在 mouseenter 和 mouseleave 事件上運(yùn)行。
這里定義inFunction為確定大圖片的位置，outFunction為remove創(chuàng)建的img節(jié)點(diǎn)。
1）只創(chuàng)建對(duì)象是不夠的，還需要將創(chuàng)建的對(duì)象添加到文檔節(jié)點(diǎn)中去，jq中使用的方法為
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開(kāi)頭插入內(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í)候，需要三個(gè)參數(shù)，第一個(gè)是參照元素，這里選的是td的parents元素，tr：var $element = $(this).parents("tr")。
第二個(gè)是本次創(chuàng)建的目標(biāo)元素，這里是img，第三個(gè)是目標(biāo)元素可以出現(xiàn)的區(qū)域元素，一般是一個(gè)很大的元素，這里是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) {//兩個(gè)if判斷，保證無(wú)論怎么劃動(dòng)鼠標(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)建的對(duì)象；$element.remove();
4) 目標(biāo)元素的css需要滿足一些條件：position:absolute
.changePhoto {
position: absolute;
width: 120px;
height: 160px;
left: 300px;
right: 10px;
float: right;
z-index: 9;
}
- 網(wǎng)頁(yè)中移動(dòng)的廣告效果 鼠標(biāo)懸停
- CSS鼠標(biāo)懸停菜單 圖片交換技術(shù)實(shí)現(xiàn)
- javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條
- hover的用法及l(fā)ive的用法介紹(鼠標(biāo)懸停效果)
- 一個(gè)簡(jiǎn)單的JS鼠標(biāo)懸停特效具體方法
- jQuery當(dāng)鼠標(biāo)懸停時(shí)放大圖片的效果實(shí)例
- jQuery實(shí)現(xiàn)列表自動(dòng)循環(huán)滾動(dòng)鼠標(biāo)懸停時(shí)停止?jié)L動(dòng)
- jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法
相關(guān)文章
微信小程序項(xiàng)目總結(jié)之點(diǎn)贊 刪除列表 分享功能
這篇文章主要介紹了微信小程序項(xiàng)目總結(jié)之點(diǎn)贊 刪除列表 分享功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
在頁(yè)面中循環(huán)添加到select中，但是在ie8中就一直提示 缺少id未定義，經(jīng)測(cè)試發(fā)現(xiàn)數(shù)組的最后多了個(gè)逗號(hào)，把逗號(hào)去掉就好了2014-03-03
深入理解javascript學(xué)習(xí)筆記（一） 編寫(xiě)高質(zhì)量代碼
編寫(xiě)高質(zhì)量JavaScript的一些要素，例如避免全局變量，使用單變量聲明，在循環(huán)中預(yù)緩存length(長(zhǎng)度)，遵循代碼閱讀，以及更多2012-08-08
javascript高級(jí)編程之函數(shù)表達(dá)式 遞歸和閉包函數(shù)
這篇文章主要介紹了javascript高級(jí)編程之函數(shù)表達(dá)式 遞歸和閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下2015-11-11
javascript之querySelector和querySelectorAll使用說(shuō)明
其實(shí)關(guān)于querySelector和querySelectorAll的介紹說(shuō)明很多,在此主要是做個(gè)記錄2011-10-10
這篇文章主要介紹了javascript的基本包裝類(lèi)型，JS為了便于操作基本類(lèi)型,提供了3個(gè)特殊的引用類(lèi)型:Boolean/Number和String,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JavaScript控制瀏覽器全屏顯示,結(jié)合簡(jiǎn)單實(shí)例形式分析了JavaScript響應(yīng)鼠標(biāo)事件控制瀏覽器全屏顯示與退出全屏顯示相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要為大家介紹了uni-app的iPhonex底部安全區(qū)域解決方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Javascript中Cookie的獲取和保存應(yīng)用案例
這篇文章主要給大家介紹了關(guān)于Javascript中Cookie的獲取和保存應(yīng)用的相關(guān)資料,Cookie是直接存儲(chǔ)在瀏覽器中的一小串?dāng)?shù)據(jù),文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
前端處理.xlsx文件流并觸發(fā)下載的完整實(shí)現(xiàn)方案
本文詳細(xì)介紹了前端處理.xlsx文件流并觸發(fā)下載的完整實(shí)現(xiàn)方案,包括核心實(shí)現(xiàn)流程、關(guān)鍵增強(qiáng)功能、常見(jiàn)問(wèn)題處理以及最佳實(shí)踐建議,方案推薦使用FileSaver.js,適用于中型以上項(xiàng)目,需要的朋友可以參考下2025-03-03