 
(function($){ 
$.fn.zoom = function(settings){ 
//一些默認(rèn)配置； 
settings = $.extend({ 
height:0, 
width:0, 
loading:"lightbox-ico-loading.gif" 
},settings); 
var images = this; 
$(images).hide(); 
var loadding = new Image(); 
loadding.className="loadding" 
loadding.src = settings.loading; 
$(images).after(loadding); 
//預(yù)加載 
var preLoad = function($this){ 
var img = new Image(); 
img.src = $this.src; 
if (img.complete) { 
processImg.call($this); 
return; 
} 
//$this.src = loadding.src;//會導(dǎo)致獲取錯誤的尺寸 
img.onload = function(){ 
//$this.src = this.src; //會導(dǎo)致獲取錯誤的尺寸 
processImg.call($this); 
img.onload=function(){}; 
} 
} 
//計算圖片尺寸； 
function processImg(){ 
//if(settings.height===0||settings.width ===0) return; 
var m = this.height-settings.height; 
var n = this.width - settings.width; 
if(m>n) 
this.height = this.height>settings.height ? settings.height : 
this.height; 
else 
this.width = this.width >settings.width ? settings.width : 
this.width; 
$(this).next(".loadding").remove() 
$(this).show(); 
} 
return $(images).each(function(){ 
preLoad(this); 
}); 
} 
})(jQuery); 

效果是這樣的：

您可能感興趣的文章:

相關(guān)文章

jQuery插件Echarts實現(xiàn)的雙軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件Echarts實現(xiàn)的雙軸圖效果,結(jié)合完整實例形式分析了Echarts插件制作雙軸圖效果的操作步驟與相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery圖片輪播的具體實現(xiàn)
之前有碰到過jQuery實現(xiàn)列表自動滾動，這次的圖片輪播在原理上與之相同，只有一些細(xì)微的差別，就是需要在圖片的右下角顯示當(dāng)前圖片的序號
2013-09-09
動態(tài)設(shè)置form表單的action屬性的值的簡單方法
下面小編就為大家?guī)硪黄獎討B(tài)設(shè)置form表單的action屬性的值的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jQuery動態(tài)星級評分效果實現(xiàn)方法
這篇文章主要介紹了jQuery動態(tài)星級評分效果實現(xiàn)方法,涉及jquery動態(tài)操作頁面元素樣式的相關(guān)技巧,效果華麗大氣,是一款非常優(yōu)秀的特效源碼,需要的朋友可以參考下
2015-08-08
jQuery三級下拉列表導(dǎo)航菜單代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery三級下拉列表導(dǎo)航菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-08-08
jquery ui sortable拖拽后保存位置
這篇文章主要為大家詳細(xì)介紹了jquery ui sortable拖拽后保存位置的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
jQuery實現(xiàn)單擊按鈕遮罩彈出對話框(仿天貓的刪除對話框)
單擊刪除按鈕或者登陸按鈕后，彈出對話框問你是否刪除或者彈出一個登陸對話框，本文使用jquery來實現(xiàn)這種效果，需要的朋友可以參考下
2014-04-04
JQuery樣式與屬性設(shè)置方法分析
這篇文章主要介紹了JQuery樣式與屬性設(shè)置方法,結(jié)合實例形式分析了jQuery屬性的獲取與設(shè)置、以及樣式的添加與刪除相關(guān)操作技巧,需要的朋友可以參考下
2019-12-12
jquery解析xml字符串示例分享
用JavaScript解析XML數(shù)據(jù)是常見的編程任務(wù)，JavaScript能做的，JQuery當(dāng)然也能做。下面我們來總結(jié)幾個使用JQuery解析XML的例子
2014-03-03
以WordPress為例講解jQuery美化頁面Title的方法
鼠標(biāo)移動到超鏈接時顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁面Title的方法,需要的朋友可以參考下
2016-05-05