基于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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
H5上传本地图片并预览功能
May 08 Javascript
vue环境搭建简单教程
Nov 07 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
js使用递归解析xml
2014/12/12 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
javascript的this关键字详解
2019/05/20 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中移动目录结构的方法
2016/01/31 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python模拟表单提交登录图书馆
2018/04/27 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
关于VPN
2012/06/10 面试题
十岁生日父母答谢词
2014/01/18 职场文书
班级文化标语
2014/06/23 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
信访稳定工作汇报
2014/10/27 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript