用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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
JS获取动态添加元素的方法详解
Jul 31 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
浅谈JS的原型和原型链
Jun 04 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
python 排列组合之itertools
2013/03/20 Python
Python 实现简单的电话本功能
2015/08/09 Python
浅谈Python 对象内存占用
2016/07/15 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python基础教程之while循环
2019/08/14 Python
python实现淘宝购物系统
2019/10/25 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
开学典礼主持词
2014/03/19 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
AJAX实现省市县三级联动效果
2021/10/16 Javascript
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers