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代码
Sep 17 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
js null undefined 空区别说明
Jun 13 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
js 概率计算(简单版)
Sep 12 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
vue使用require.context实现动态注册路由
Dec 25 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
一个PHP+MSSQL分页的例子
2006/10/09 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php无序树实现方法
2015/07/28 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
怎么写有吸引力的自荐信
2013/11/17 职场文书
医院门卫岗位职责
2013/12/30 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android