用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 相关文章推荐
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
JS变量提升原理与用法实例浅析
May 22 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 is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JS前端笔试题分析
2016/12/19 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
详解supervisor使用教程
2017/11/21 Python
wxpython绘制圆角窗体
2019/11/18 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
学习nginx基础知识
2021/09/04 Servers
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技