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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 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/06/24 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
javascript 写类方式之八
2009/07/05 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jquery使用经验小结
2015/05/20 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
pygame实现弹球游戏
2020/04/14 Python
python 实现超级玛丽游戏
2020/11/25 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
诉讼财产保全担保书
2014/05/20 职场文书
法人授权委托书
2014/09/16 职场文书
导游词之任弼时故居
2020/01/07 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
python not运算符的实例用法
2021/06/30 Python