ホームページ > 記事 > ウェブフロントエンド > jQuery_jqueryに基づく画像サイズ自動適応実装コード
jQuery_jqueryに基づく画像サイズ自動適応実装コード
- WBOYオリジナル
- 2016-05-16 18:16:13981ブラウズ
についてこれには、画像のプリロードや無限の画像を表示する限定されたコンテナなど、遠くからズームインした前の画像と多くの類似点があります。
サイズの計算: 内側と外側の 2 つの比率。
コードをコピー コードは次のとおりです:
// コンテナの比率と画像の比率
var dr = dw/dh, ir = iw/ih;
if(dr>ir){
ih = ih * ir;
iw = dw; ih = iw /ir;
}
コードをコピー コードは次のとおりです。
$img.css({width:iw ,height: ih,position:'absolute',top:'50%',left:'50%',marginLeft:-iw/2,marginTop:-ih/2})
読み込み中および読み込みエラー: カスタマイズ可能なパラメータ。 HTML コンテナ:
使用方法:
コードをコピー コードは次のとおりです:
$( 'div.jq-img-autoresize').imgAutoResizer({
loading : function () { $(this).text('loading..'); }
,error : function ( ) { $(this).text('無効..') }
});
すべてのコード: loading : function () { $(this).text('loading..'); }
,error : function ( ) { $(this).text('無効..') }
});
コードをコピーします コードは次のとおりです:
/*
* 画像スケーリング
* @by ambar
* @create 2010-11 -17
* @update 2010-11-17
*/
$.fn.imgAutoResizer = function (オプション) {
return this.each(function () {
var opt = $.extend({
sizeAttr : 'data-img-size'
, srcAttr : 'data-img-url'
, エラー : null
, 読み込み中 : null
}, オプション|| {}) ;
var $el = $(this), src = $el.attr(opt.srcAttr), size = $el.attr(opt.sizeAttr); 🎜>// コンテナの幅と高さ
var dw = size[0], dh = size[1];
var $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;
iw = dw; ih = iw / ir;
}
}
// console.log(dr,':',iw,'@',ih); 'img.complete',true ).css({position:'relative',width:dw,height:dh,overflow:'hidden'}); ,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
* 画像スケーリング
* @by ambar
* @create 2010-11 -17
* @update 2010-11-17
*/
$.fn.imgAutoResizer = function (オプション) {
return this.each(function () {
var opt = $.extend({
sizeAttr : 'data-img-size'
, srcAttr : 'data-img-url'
, エラー : null
, 読み込み中 : null
}, オプション|| {}) ;
var $el = $(this), src = $el.attr(opt.srcAttr), size = $el.attr(opt.sizeAttr); 🎜>// コンテナの幅と高さ
var dw = size[0], dh = size[1];
var $img = $('
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;
iw = dw; ih = iw / ir;
}
}
// console.log(dr,':',iw,'@',ih); 'img.complete',true ).css({position:'relative',width:dw,height:dh,overflow:'hidden'}); ,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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。