用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 相关文章推荐
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
微信小程序 WeUI扩展组件库的入门教程
Apr 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生成文件
2007/01/15 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
openPNE常用方法分享
2011/11/29 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
初婚初育证明范本
2014/11/24 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
公司保洁员管理制度
2015/08/04 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers