基于jQuery的圖片大小自動(dòng)適應(yīng)實(shí)現(xiàn)代碼
更新時(shí)間:2010年11月17日 14:27:27 作者:
這個(gè)和以前弄的圖片遠(yuǎn)處放大有許多相同的地方,比如圖片預(yù)加載、有限容器顯示無(wú)限大圖片。
關(guān)于
這個(gè)和以前弄的圖片遠(yuǎn)處放大有許多相同的地方,比如圖片預(yù)加載、有限容器顯示無(wú)限大圖片。
大小計(jì)算:內(nèi)外兩個(gè)比例。
// 容器比例和圖片比例
var dr = dw/dh, ir = iw/ih;
if(dr>ir){
ih = dh; iw = ih * ir;
}else{
iw = dw; ih = iw / ir;
}
居中顯示:CSS絕對(duì)定位,負(fù)邊距。
$img.css({width:iw,height:ih,position:'absolute',top:'50%',left:'50%',marginLeft:-iw/2,marginTop:-ih/2})
加載中和加載出錯(cuò):可自定義的參數(shù)。
HTML容器:
<div class="jq-img-autoresize" data-img-size="160,390" data-img-url="m1.jpg"></div>
如何使用:
$('div.jq-img-autoresize').imgAutoResizer({
loading : function () { $(this).text('loading..'); }
,error : function () { $(this).text('無(wú)效..'); }
});
所有代碼:
/*
* 圖片等比縮放
* @by ambar
* @create 2010-11-17
* @update 2010-11-17
*/
$.fn.imgAutoResizer = function (options) {
return this.each(function () {
var opt = $.extend({
sizeAttr : 'data-img-size'
,srcAttr : 'data-img-url'
,error : null
,loading : null
}, options || {});
var $el = $(this), src = $el.attr(opt.srcAttr), size = $el.attr(opt.sizeAttr).split(',');
// 容器寬高
var dw = size[0], dh = size[1];
var $img = $('<img />', { src : src }), img = $img[0];
var autoresize = function () {
if($el.data('img.complete')) return;
// 圖片寬高
var iw = img.width, ih = img.height;
if(!iw || !ih) return;
// 比例
var dr = dw/dh, ir = iw/ih;
if( !(dw > iw && dh > ih) ){
if(dr>ir){
ih = dh; iw = ih * ir;
}else{
iw = dw; ih = iw / ir;
}
}
// console.log(dr,':',iw,'@',ih);
$el.data('img.complete',true).css({position:'relative',width:dw,height:dh,overflow:'hidden'});
$img.css({width:iw,height:ih,position:'absolute',top:'50%',left:'50%',marginLeft:-iw/2,marginTop:-ih/2}).appendTo($el.empty());
};
$img
.load(autoresize)
.error(function () {
if($.isFunction(opt.error)) opt.error.call($el);
});
if(img.complete){
if(img.width && img.height) autoresize();
}else{
if($.isFunction(opt.loading)) opt.loading.call($el);
}
})
};
演示地址:http://demo.jb51.net/js/imgAutoResizer/
打包下載:http://xiazai.jb51.net/201011/yuanma/imgAutoResizer.rar
這個(gè)和以前弄的圖片遠(yuǎn)處放大有許多相同的地方,比如圖片預(yù)加載、有限容器顯示無(wú)限大圖片。
大小計(jì)算:內(nèi)外兩個(gè)比例。
復(fù)制代碼 代碼如下:
// 容器比例和圖片比例
var dr = dw/dh, ir = iw/ih;
if(dr>ir){
ih = dh; iw = ih * ir;
}else{
iw = dw; ih = iw / ir;
}
居中顯示:CSS絕對(duì)定位,負(fù)邊距。
復(fù)制代碼 代碼如下:
$img.css({width:iw,height:ih,position:'absolute',top:'50%',left:'50%',marginLeft:-iw/2,marginTop:-ih/2})
加載中和加載出錯(cuò):可自定義的參數(shù)。
HTML容器:
<div class="jq-img-autoresize" data-img-size="160,390" data-img-url="m1.jpg"></div>
如何使用:
復(fù)制代碼 代碼如下:
$('div.jq-img-autoresize').imgAutoResizer({
loading : function () { $(this).text('loading..'); }
,error : function () { $(this).text('無(wú)效..'); }
});
所有代碼:
復(fù)制代碼 代碼如下:
/*
* 圖片等比縮放
* @by ambar
* @create 2010-11-17
* @update 2010-11-17
*/
$.fn.imgAutoResizer = function (options) {
return this.each(function () {
var opt = $.extend({
sizeAttr : 'data-img-size'
,srcAttr : 'data-img-url'
,error : null
,loading : null
}, options || {});
var $el = $(this), src = $el.attr(opt.srcAttr), size = $el.attr(opt.sizeAttr).split(',');
// 容器寬高
var dw = size[0], dh = size[1];
var $img = $('<img />', { src : src }), img = $img[0];
var autoresize = function () {
if($el.data('img.complete')) return;
// 圖片寬高
var iw = img.width, ih = img.height;
if(!iw || !ih) return;
// 比例
var dr = dw/dh, ir = iw/ih;
if( !(dw > iw && dh > ih) ){
if(dr>ir){
ih = dh; iw = ih * ir;
}else{
iw = dw; ih = iw / ir;
}
}
// console.log(dr,':',iw,'@',ih);
$el.data('img.complete',true).css({position:'relative',width:dw,height:dh,overflow:'hidden'});
$img.css({width:iw,height:ih,position:'absolute',top:'50%',left:'50%',marginLeft:-iw/2,marginTop:-ih/2}).appendTo($el.empty());
};
$img
.load(autoresize)
.error(function () {
if($.isFunction(opt.error)) opt.error.call($el);
});
if(img.complete){
if(img.width && img.height) autoresize();
}else{
if($.isFunction(opt.loading)) opt.loading.call($el);
}
})
};
演示地址:http://demo.jb51.net/js/imgAutoResizer/
打包下載:http://xiazai.jb51.net/201011/yuanma/imgAutoResizer.rar
您可能感興趣的文章:
- 使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
- jQuery獲取file控件中圖片的寬高與大小
- 基于jquery實(shí)現(xiàn)圖片相關(guān)操作(重繪、獲取尺寸、調(diào)整大小、縮放)
- jquery預(yù)覽圖片實(shí)現(xiàn)鼠標(biāo)放上去顯示實(shí)際大小
- jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡(jiǎn)單示例
- 簡(jiǎn)單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- JQuery Jcrop 實(shí)現(xiàn)圖片裁剪的插件
- jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能
- 基于Jquery的簡(jiǎn)單圖片切換效果
- 使用jquery獲取網(wǎng)頁(yè)中圖片高度的兩種方法
- jQuery實(shí)現(xiàn)判斷上傳圖片類型和大小的方法示例
相關(guān)文章

javascript 全角轉(zhuǎn)換實(shí)現(xiàn)代碼
當(dāng)客戶端用戶切換輸入法至全角時(shí)可能您的表單提交會(huì)有漏洞哦!不過(guò)事實(shí)上js有這功能 可以將其轉(zhuǎn)換為非全角字符!
2009-07-07 
jQuery中setTimeout的幾種使用方法小結(jié)
jQuery 中 setTimeout/setInterval 不能像在原生態(tài) javascript 中那樣使用, 否則會(huì)報(bào)錯(cuò).
2013-04-04 
jQuery事件_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery事件的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
2017-07-07 
jQuery實(shí)現(xiàn)在新增加的元素上添加事件方法案例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)在新增加的元素上添加事件方法,結(jié)合具體實(shí)例形式分析了jQuery針對(duì)新增加的元素添加事件的實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2017-02-02 
Jquery實(shí)時(shí)監(jiān)聽input value的實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery實(shí)時(shí)監(jiān)聽input value的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01