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 add event remove event
Apr 07 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
JS闭包原理及其使用场景解析
Dec 03 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人民币金额转大写实例代码
2015/10/02 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php接口技术实例详解
2016/12/07 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
党员一句话承诺大全
2014/03/28 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
初中运动会前导词
2015/07/20 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js