JS自动缩小超出大小的图片


Posted in Javascript onOctober 12, 2012
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ 
if(loadpic==null)loadpic="../img/loading.gif"; 
return this.each(function(){ 
var t=$(this); 
var src=$(this).attr("src") 
var img=new Image(); 
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){ 
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(); 
}); 
} ); 
} 
</script> 
<div id="content"><img src="img/20120518073933709.jpg"/></div> 
<script type="text/javascript"> 
<!-- 
$(window).load(function(){ 
$('#content img').LoadImage(true, 600,500,'img/loading.gif'); 
}); 
//--> 
</script>
Javascript 相关文章推荐
js实现表格字段排序
Feb 19 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 #Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 #Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 #Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 #Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 #Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 #Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 #Javascript
You might like
漂亮但不安全的CTB
2006/10/09 PHP
php绘制一条直线的方法
2015/01/24 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
javascript 面向对象继承
2009/11/26 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
gearman的安装启动及python API使用实例
2014/07/08 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
公司财务自我评价分享
2013/12/17 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
关于召开会议的通知
2015/04/15 职场文书
标枪加油稿
2015/07/22 职场文书
2016党员入党决心书
2015/09/22 职场文书
《观潮》教学反思
2016/02/17 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
pycharm无法安装cv2模块问题
2022/05/20 Python