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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
javascript常见操作汇总
Sep 03 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 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实现天干地支计算器示例
2014/03/14 PHP
php中error与exception的区别及应用
2014/07/28 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
再谈javascript面向对象编程
2012/03/18 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
vant自定义二级菜单操作
2020/11/02 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python模拟百度登录实例详解
2016/01/20 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
单身联谊活动方案
2014/01/29 职场文书
房产授权委托书范本
2014/09/22 职场文书
青岛导游词
2015/02/12 职场文书
闪闪红星观后感
2015/06/08 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
DE1103使用报告
2022/04/05 无线电