关于
这个和以前弄的图片远处放大有许多相同的地方,比如图片预加载、有限容器显示无限大图片。

大小计算:内外两个比例。
复制代码 代码如下:
// 容器比例和图片比例
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})

加载中和加载出错:可自定义的参数。

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);
}
})
};

演示地址:http://demo.jb51.net/js/imgAutoResizer/
打包下载:http://xiazai.jb51.net/201011/yuanma/imgAutoResizer.rar
标签:
图片大小,自动适应

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“基于jQuery的图片大小自动适应实现代码”

暂无“基于jQuery的图片大小自动适应实现代码”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。