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 相关文章推荐
jQuery拖动图片删除示例
May 10 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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中strtotime函数使用方法分享
2012/01/10 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python连接MySQL数据库实例分析
2015/05/12 Python
python递归全排列实现方法
2018/08/18 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
秋季运动会通讯稿
2014/01/24 职场文书
个人自我鉴定总结
2014/03/25 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015年工程师工作总结
2015/04/30 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
MySQL慢查询优化解决问题
2022/03/17 MySQL
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技