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 相关文章推荐
popdiv
Jul 14 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
js实现图片轮播效果
Dec 19 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
vue 自定义组件的写法与用法详解
Mar 04 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
vue cli 全面解析
2018/02/28 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Python微信公众号开发平台
2018/01/25 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
求职简历推荐信范文
2013/12/02 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
关于军训的感想
2015/08/07 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
小程序实现侧滑删除功能
2022/06/25 Javascript