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的对话框详解与参数
Mar 08 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
基于form-data请求格式详解
Oct 29 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 创建标签云函数代码
2010/05/26 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
vuejs指令详解
2017/02/07 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
vue实现评价星星功能
2020/06/30 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
Spy++的使用方法及下载教程
2021/01/29 Python
中层干部培训方案
2014/06/16 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
毕业生学校组织意见
2015/06/04 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
解决xampp安装后Apache无法启动
2022/03/21 Servers