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 相关文章推荐
jQuery.clean使用方法及思路分析
Jan 07 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
javascript类型转换示例
Apr 29 Javascript
js中document.write的那点事
Dec 12 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
原生js实现自定义滚动条组件
Jan 20 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
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
详解Python核心对象类型字符串
2018/02/11 Python
python中import与from方法总结(推荐)
2019/03/21 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Python爬取网页信息的示例
2020/09/24 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
创业计划书之个人工作室
2019/08/22 职场文书