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 实现的自定义对话框
Mar 24 Javascript
js 页面输出值
Nov 30 Javascript
jQuery Ajax 全解析
Feb 08 Javascript
js表数据排序 sort table data
Feb 18 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 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取整数函数常用的四种方法小结
2012/07/05 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
JavaScript的目的分析
2007/01/05 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
大型会议接待方案
2014/03/01 职场文书
单位介绍信格式
2015/01/31 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
搬迁通知
2015/04/20 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
导游词之江西赣州
2019/10/15 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
nginx 配置缓存
2022/05/11 Servers
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android
5个实用的JavaScript新特性
2022/06/16 Javascript