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之软键盘实现(js源码)
Jan 30 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
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
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php微信开发之谷歌测距
2018/06/14 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python使用re模块验证危险字符
2020/05/21 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python 代码运行时间获取方式详解
2020/09/18 Python
一道SQL存储过程面试题
2016/10/07 面试题
2014自荐信的写作技巧
2014/01/28 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
舞蹈专业求职信
2014/06/13 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
开会通知短信大全
2015/04/20 职场文书
芙蓉镇观后感
2015/06/10 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书