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 新浪背投广告实现代码
Jul 07 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP常用处理静态操作类
2015/04/03 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python入门必须知道的11个知识点
2018/03/21 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
python实现视频读取和转化图片
2019/12/10 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
大一自我鉴定范文
2013/12/27 职场文书
数控机床专业自荐信
2014/05/19 职场文书
公司员工辞职信范文
2015/05/12 职场文书