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 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
理解javascript异步编程
Jan 27 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
PHP5+UTF8多文件上传类
2008/10/17 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
js实现网站首页图片滚动显示
2013/02/04 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python操作Access数据库基本步骤分析
2016/09/19 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python里运用私有属性和方法总结
2019/07/08 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
车间机修工岗位职责
2014/02/28 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
离婚协议书格式
2014/11/21 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang