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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
关于vue的列表图片选中打钩操作
Sep 09 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&amp;mysql(三)
2006/10/09 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
详解flask入门模板引擎
2018/07/18 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
学校宣传标语
2014/06/18 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android