今天做在線聊天網(wǎng)頁，聊天可以配圖，需要使用彈出層的方式瀏覽大圖效果。總共三層，底層html主結(jié)構(gòu)，中間半透明遮罩，頂層是縮略圖放大后的大圖。用戶點(diǎn)擊縮略圖后在半透明遮罩上呈現(xiàn)大圖。

　　因?yàn)樵诰€聊天，圖片數(shù)量和地址都是動(dòng)態(tài)未知的，因此用戶點(diǎn)擊縮略圖時(shí)，應(yīng)該在body下動(dòng)態(tài)生成一個(gè)大圖元素，并居中顯示。代碼如下：

?

$(".smallImg").click(function(){var imgPath = $(this).attr("src");var zh_bigImg = "<img alt='大圖' class='zh_bigImg'/>"var maskBg = "<div class='maskDiv'></div>"$("body").append(zh_bigImg).append(maskBg);$(".zh_bigImg").attr("src",imgPath); //將獲取的縮略圖src值賦給新生成的大圖//以下代碼用于設(shè)置大圖的居中顯示，先設(shè)置大圖的css為絕對(duì)定位，且top:50%;left:50%.var bigImgTop = -$(".zh_bigImg").height()/2;var bigImgLeft = -$(".zh_bigImg").width()/2;$(".zh_bigImg").css({"margin-top":bigImgTop,"margin-left":bigImgLeft});var zhBigImg = $(".zh_bigImg").get(0); //將jq對(duì)象轉(zhuǎn)化為js對(duì)象zhBigImg.οnclick=function(){$(".zh_bigImg,.maskDiv").fadeOut(function(){$(this).remove(); //淡出效果完成后再移除此元素！});}});

　　

　　當(dāng)剛剛將縮略圖的src賦給大圖時(shí)，就來獲取大圖高度值和寬度值，這樣似乎不妥。結(jié)果卻是這樣，新生成的大圖位置始終在top:50%；left:50%處，F12打開調(diào)試窗口發(fā)現(xiàn)margin-top，margin-left都為0，在各大瀏覽器或多或少都會(huì)存在一些問題，時(shí)而有效時(shí)而無效。后來才發(fā)現(xiàn)，忘了使用load()方法。應(yīng)該讓大圖加載完畢后，再來獲取高度和寬度值。

?改為這樣：

$(".zh_bigImg").load(function(){var bigImgTop = -$(this).height()/2;var bigImgLeft = -$(this).width()/2;$(this).css({"margin-top":bigImgTop,"margin-left":bigImgLeft}); })

　后就正常了。

此外，jquery在處理頁面動(dòng)態(tài)創(chuàng)建的元素方面，好多地方都需要注意。它不會(huì)響應(yīng)動(dòng)態(tài)創(chuàng)建的元素的事件，只有用live()方法來綁定事件，才能解決問題（直接用原生的js不知道行不行）。比如點(diǎn)擊大圖，應(yīng)該是清除這個(gè)元素。$(".zhBigImg").click(function(){$(this).remove()}),點(diǎn)擊大圖時(shí)頁面是不會(huì)有任何響應(yīng)的。改為:$(".zhBigImg").live('click',function(){$(this).remove()})則可以。

　　

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/flappyCoder/p/3628579.html

總結(jié)

以上是生活随笔為你收集整理的jquery中的load()方法使用要点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。