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 相关文章推荐
Javascript图像处理思路及实现代码
Dec 25 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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
PHP session有效期问题
2009/04/26 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
python3中的md5加密实例
2018/05/29 Python
python中的句柄操作的方法示例
2019/06/20 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Tensorflow 多线程设置方式
2020/02/06 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
python的dict判断key是否存在的方法
2020/12/09 Python
销售主管的自我评价分享
2014/01/03 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
高中英语教学反思
2014/02/04 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书