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


Posted in Javascript onNovember 17, 2010

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

大小计算:内外两个比例。

// 容器比例和图片比例 
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.3water.com/js/imgAutoResizer/
打包下载:http://xiazai.3water.com/201011/yuanma/imgAutoResizer.rar
Javascript 相关文章推荐
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
js word表格动态添加代码
Jun 07 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 #Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 #Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 #Javascript
div层的移动及性能优化
Nov 16 #Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 #Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 #Javascript
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
PHP学习之数组值的操作
2011/04/17 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
laravel5.6实现数值转换
2019/10/23 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
Anaconda下安装mysql-python的包实例
2018/06/11 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python求最大值最小值方法总结
2019/06/25 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
什么是Python中的顺序表
2020/06/02 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
银行求职信范文
2014/05/26 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
营销计划书范文
2015/01/17 职场文书
烈士陵园观后感
2015/06/08 职场文书
大学生见习总结报告
2015/06/24 职场文书
六一亲子活动感想
2015/08/07 职场文书