用jquery实现等比例缩放图片效果插件


Posted in Javascript onJuly 24, 2010
jQuery.fn.autoZoomLoadImage = function(scaling, width, height, loadPic) { 
if (loadPic == null) loadPic = "Loading.gif"; 
return this.each(function() { 
var t = $(this); 
var src = $(this).attr("src"); 
var img = new Image(); 
//alert("Loading") 
img.src = src; 
//自动缩放图片 
var autoScaling = function() { 
if (scaling) { 
if (img.width > 0 && img.height > 0) { 
if (img.width / img.height >= width / height) { 
if (img.width > width) { 
t.width(width); 
t.height((img.height * width) / img.width); 
} 
else { 
t.width(img.width); 
t.height(img.height); 
} 
} 
else { 
if (img.height > height) { 
t.height(height); 
t.width((img.width * height) / img.height); 
} 
else { 
t.width(img.width); 
t.height(img.height); 
} 
} 
} 
} 
} 
//处理ff下会自动读取缓存图片 
if (img.complete) { 
//alert("getToCache!"); 
autoScaling(); 
return; 
} 
$(this).attr("src", ""); 
var loading = $("<img alt=\"加载中\" title=\"图片加载中\" src=\"" + loadPic + "\" />"); 
t.hide(); 
t.after(loading); 
$(img).load(function() { 
autoScaling(); 
loading.remove(); 
t.attr("src", this.src); 
t.show(); 
//alert("finally!") 
}); 
}); 
}
Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
一个对于js this关键字的问题
Jan 09 Javascript
js获取div高度的代码
Aug 09 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
JavaScript前端面试组合函数
Jun 21 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 #Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 #Javascript
aspx中利用js实现确认删除代码
Jul 22 #Javascript
JS实现self的resend
Jul 22 #Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 #Javascript
关于javascript DOM事件模型的两件事
Jul 22 #Javascript
JavaScript 事件系统
Jul 22 #Javascript
You might like
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Jar包的作用是什么
2014/03/30 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
企业员工培训感言
2014/02/26 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
行政主管岗位职责
2015/02/03 职场文书
高中信息技术教学反思
2016/02/16 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS