用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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
js Date概念详细介绍
Nov 22 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
javascript实现表单验证
2016/01/29 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
Python 装饰器使用详解
2017/07/29 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python编程嵌套函数实例代码
2018/02/11 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python 私有化操作实例分析
2019/11/21 Python
Python3运算符常见用法分析
2020/02/14 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
广州盈通面试题
2015/12/05 面试题
教育系毕业生中文求职信范文
2013/10/06 职场文书
室内设计专业个人的自我评价
2013/10/19 职场文书
就业协议书怎么填
2014/04/11 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
学生上课说话检讨书
2014/10/25 职场文书
优质护理服务心得体会
2016/01/22 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android