用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 中关于CSS操作部分使用说明
Jun 10 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
vue全屏事件开发详解
Jun 17 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
vue使用element-ui按需引入
May 20 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
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
详解Python中的相对导入和绝对导入
2017/01/06 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Servlet的生命周期
2013/08/25 面试题
应届生煤化工求职信
2013/10/21 职场文书
机械个人求职信范文
2014/01/24 职场文书
厨房管理计划书
2014/04/27 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
优秀教师推荐材料
2014/12/16 职场文书
运动会200米广播稿
2015/08/19 职场文书
初三化学教学反思
2016/02/22 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
索尼ICF-36收音机评测
2022/04/30 无线电