用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 验证日期的函数
Mar 18 Javascript
js DOM的学习笔记
Dec 22 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
原生js+css实现tab切换功能
Sep 17 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自定义函数返回多个值
2006/11/26 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
使用python 写一个静态服务(实战)
2019/06/28 Python
用python计算文件的MD5值
2020/12/23 Python
Python实现简单猜数字游戏
2021/02/03 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
医学类导师推荐信范文
2013/11/19 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
农民工讨薪标语
2014/06/26 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL