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 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
JS截取字符串实例详解
Nov 24 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
原生js生成图片验证码
Oct 11 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
ES6学习教程之模板字符串详解
2017/10/09 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python读写文件基础知识点
2019/06/10 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
师说教学反思
2014/02/07 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
工地安全生产标语
2014/06/06 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python