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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
js实现二级联动简单实例
Jan 11 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 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:风雨欲来 路在何方?
2006/10/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python多线程http下载实现示例
2013/12/30 Python
python新手经常遇到的17个错误分析
2014/07/30 Python
Python对列表排序的方法实例分析
2015/05/16 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
《火烧云》教学反思
2014/04/12 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
网络舆情信息简报
2015/07/21 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python