用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 1.5最新版本的改进细节分析
Jan 19 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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
重置版游戏视频
2020/04/09 魔兽争霸
php自动注册登录验证机制实现代码
2011/12/20 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
秋游活动策划方案
2014/02/16 职场文书
授权委托书公证
2014/09/14 职场文书
授权委托书
2015/01/28 职场文书
小学感恩节活动总结
2015/03/24 职场文书
Python之基础函数案例详解
2021/08/30 Python
Python自动化实战之接口请求的实现
2022/05/30 Python