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
Nov 25 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
文本框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获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
js实现简单计算器
2015/11/22 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Java及python正则表达式详解
2017/12/27 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
详解python中list的使用
2019/03/15 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
五好关工委申报材料
2014/05/31 职场文书
真诚的求职信
2014/07/04 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
英语感谢信范文
2015/01/20 职场文书