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 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
分享php分页的功能模块
2015/06/16 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python中装饰器学习总结
2018/02/10 Python
python实现推箱子游戏
2020/03/25 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python如何输出警告信息
2020/07/30 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
秋季运动会通讯稿
2014/01/24 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
村干部培训班主持词
2014/03/28 职场文书
化学专业自荐信
2014/05/28 职场文书
新农村建设典型材料
2014/05/31 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
公司借条范本
2015/05/25 职场文书
高中生物教学反思
2016/02/20 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js