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表数据排序 sort table data
Feb 18 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
js之ajax文件上传
May 13 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
php实现URL加密解密的方法
2016/11/17 PHP
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vue观察模式浅析
2018/09/25 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python制作朋友圈九宫格图片
2019/11/03 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
授权委托书怎么写
2014/09/25 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
旷课检讨书
2015/01/26 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
班主任远程培训研修日志
2015/11/13 职场文书