jQuery在页面加载时动态修改图片尺寸的方法


Posted in Javascript onMarch 20, 2015

本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法。分享给大家供大家参考。具体如下:

$(window).bind("load", function() {
  // IMAGE RESIZE
  $('#product_cat_list img').each(function() {
    var maxWidth = 120;
    var maxHeight = 120;
    var ratio = 0;
    var width = $(this).width();
    var height = $(this).height();
    if(width > maxWidth){
      ratio = maxWidth / width;
      $(this).css("width", maxWidth);
      $(this).css("height", height * ratio);
      height = height * ratio;
    }
    var width = $(this).width();
    var height = $(this).height();
    if(height > maxHeight){
      ratio = maxHeight / height;
      $(this).css("height", maxHeight);
      $(this).css("width", width * ratio);
      width = width * ratio;
    }
  });
  //$("#contentpage img").show();
  // IMAGE RESIZE
});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 #Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 #Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 #Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 #Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 #Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 #Javascript
初识Node.js
Mar 20 #Javascript
You might like
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
python获取地震信息 微信实时推送
2019/06/18 Python
python绘制彩虹图
2019/12/16 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Python pymsql模块的使用
2020/09/07 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
服装公司总经理岗位职责
2013/11/30 职场文书
银行委托书范本
2014/04/04 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers