用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 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
理解javascript回调函数
Dec 28 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 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
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
学习vue.js计算属性
2016/12/03 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python相似模块用例
2016/03/04 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
django模板语法学习之include示例详解
2017/12/17 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python简单区块链模拟详解
2019/07/03 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python实现简单成绩录入系统
2019/09/19 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
好邻里事迹材料
2014/01/16 职场文书
入党积极分子评语
2014/05/04 职场文书
实验心得体会范文
2016/01/25 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
Flask response响应的具体使用
2021/07/15 Python