有些時候爲了排版的整潔,頁面展現的圖片不得不都是限定寬高的,若是想要點擊圖片放大至原始大小進行預覽,再次點擊回到原來樣子,就要用到下面的代碼了:css
var _w = parseInt($(window).width());//獲取瀏覽器的寬度 $("#abc img").each(function(i){ var img = this; var realWidth;//真實的寬度 var realHeight;//真實的高度 $("<img/>").attr("src", $(img).attr("src")).load(function() { realWidth = this.width; realHeight = this.height; }) var flag = 1; $(img).on("click",function () { if (flag == 1) { if(realWidth>=_w){ $(img).css({ "width": "100%", "height": "auto", "position": "fixed", "top": "50%", "left": "50%", "margin-top": "-30%", "margin-left": "-50%" }); }else{ $(img).css({ "width": realWidth, "height": realHeight, "position": "fixed", "top": "50%", "left": "50%", "margin-top": -realHeight / 2, "margin-left": -realWidth / 2 }); } flag = 0; } else { $(img).css({ "width": 500, "height": 400, }); flag = 1; } }); });
以上代碼獲取圖片原始寬高爲轉載,進行加工後如上。親測有效,可是對於圖片上傳後,點擊方法後,貌似並不能獲取到原始寬高,我想應該是load的緣由,還請懂的大神多多指點,如何實現上傳的圖片文件,點擊縮略圖,放大至原始大小!!!瀏覽器