用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 错误处理的几种方法
Jun 13 Javascript
基于jquery的放大镜效果
May 30 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
javascript实现简易计算器
2017/02/01 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
django settings.py 配置文件及介绍
2019/07/15 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
模具专业毕业生自荐书范文
2014/02/19 职场文书
环保倡议书300字
2014/05/15 职场文书
驻村工作简报
2015/07/20 职场文书
办公室规章制度范本
2015/08/04 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python