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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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
咖啡的植物学知识
2021/03/03 咖啡文化
php防注入及开发安全详细解析
2013/08/09 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
新闻内页-JS分页
2006/06/07 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
JS判断数组那点事
2017/10/10 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
windows下python和pip安装教程
2018/05/25 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
Java基础知识面试题
2014/03/25 面试题
安全月活动总结
2014/05/05 职场文书
大学生英文求职信范文
2015/03/19 职场文书
创业计划书之水果店
2019/07/18 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL