当前位置: 58彩票app下载 > 计算机网络 > 正文

听别人说jQuery的图片大小自动适应达成代码

时间:2019-09-18 11:14来源:计算机网络
关于 其一和原先弄的图片远处放大有很多同样的地点,比方图片预加载、有限容器显示Infiniti大图片。 大大小小总括:内外四个比例。 复制代码 代码如下: // 容器比例和图表比例 var

关于 其一和原先弄的图片远处放大有很多同样的地点,比方图片预加载、有限容器显示Infiniti大图片。

大大小小总括:内外四个比例。

复制代码 代码如下:

// 容器比例和图表比例
var dr = dw/dh, ir = iw/ih;
if(dr>ir){
ih = dh; iw = ih * ir;
}else{
iw = dw; ih = iw / ir;
}

从中呈现:CSS绝对定位,负边距。

复制代码 代码如下:

$img.css({width:iw,height:ih,position:'absolute',top:'50%',left:'50%',marginLeft:-iw/2,marginTop:-ih/2})

加载3月加载出错:可自定义的参数。

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('无效..'); }
});

全部代码:

复制代码 代码如下:

/*
* 图片等比缩放
* @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);
}
})
};

演示地址:
包装下载:

你恐怕感兴趣的小说:

  • 使用jQuery实现认证上传图片的格式与大小
  • jQuery获取file控件中图纸的宽高与大小
  • 依据jquery达成图片相关操作(重绘、获取尺寸、调治大小、缩放)
  • jquery预览图片完结鼠标放上去展现实际尺寸
  • jQuery落成的上传图片本地预览效果轻松示例
  • 简轻巧单实现jQuery上传图片展现预览成效
  • JQuery Jcrop 完结图片裁剪的插件
  • jquery达成图片上传前本地预览效用
  • 遵照Jquery的简练图片切换效果
  • 行使jquery获取网页中图纸高度的二种艺术
  • jQuery完结判别上传图片类型和分寸的艺术身先士卒

编辑:计算机网络 本文来源:听别人说jQuery的图片大小自动适应达成代码

关键词: