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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
vscode自定义vue模板的实现
Jan 27 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
php array的学习笔记
2012/05/10 PHP
js玩一玩WSH吧
2007/02/23 Javascript
javascript 函数速查表
2010/02/07 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python制作爬虫采集小说
2015/10/25 Python
神经网络python源码分享
2017/12/15 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python try except finally资源回收的实现
2021/01/25 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
精细化工应届生求职信
2013/11/17 职场文书
料理师求职信
2014/01/30 职场文书
元旦晚会邀请函
2014/02/01 职场文书
担保书格式及范文
2014/04/01 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
Nginx实现负载均衡的项目实践
2022/03/18 Servers
python文件与路径操作神器 pathlib
2022/04/01 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android