用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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
详解Vue之事件处理
Jul 10 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php验证码实现代码(3种)
2015/09/07 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
vue实现微信分享功能
2018/11/28 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
捐款倡议书
2014/04/14 职场文书
企业党员一句话承诺
2014/05/30 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
小学中队委竞选稿
2015/11/20 职场文书