jquery图片不完全按比例自动缩小的简单代码


Posted in Javascript onJuly 29, 2013
jQuery(document).ready(function()
{ 
/* 图片不完全按比例自动缩小*/ 
$(window).load(function(){$('#content div.thumbnail img').each(function(){ var x = 200; 
//填入目标图片宽度
 var y = 140; 
//填入目标图片高度
 var w=$(this).width(), h=$(this).height();
//获取图片宽度、高度 
if (w > x) { 
//图片宽度大于目标宽度时 
var w_original=w, h_original=h; h = h * (x / w);
 //根据目标宽度按比例算出高度 w =x;
 //宽度等于预定宽度 if (h < y) { 
//如果按比例缩小后的高度小于预定高度时
 w = w_original * (y /h_original); 
//按目标高度重新计算宽度 h = y;
 //高度等于预定高度 
} 
}
$(this).attr({width:w,height:h}); }); }); });
Javascript 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
vue store之状态管理模式的详细介绍
Jun 13 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 #Javascript
jquery 定位input元素的几种方法小结
Jul 28 #Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 #Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 #Javascript
alert中断settimeout计时功能
Jul 26 #Javascript
JS清除IE浏览器缓存的方法
Jul 26 #Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php的dl函数用法实例
2014/11/06 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
javascript 函数调用规则
2009/08/26 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
Express.JS使用详解
2014/07/17 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
js运动事件函数详解
2016/10/21 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
javascript中call()、apply()的区别
2019/03/21 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Python @property原理解析和用法实例
2020/02/11 Python
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
航空大学应届生求职信
2013/11/10 职场文书
大学生旷课检讨书
2014/01/22 职场文书
贷款承诺书范文
2014/05/19 职场文书
广告学专业求职信
2014/06/19 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python