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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
微信小程序实现美团菜单
2018/06/06 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python中方法链的使用方法
2016/02/23 Python
Python-接口开发入门解析
2019/08/01 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python 音频生成器的实现示例
2019/12/24 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
is_file和file_exists效率比较
2021/03/14 PHP
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
视图的作用
2014/12/19 面试题
品质标语大全
2014/06/21 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
公司经营目标责任书
2015/01/29 职场文书
岗位聘任报告
2015/03/02 职场文书
公司宣传语大全
2015/07/13 职场文书
cf战队宣传语
2015/07/13 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
高中班长竞选稿
2015/11/20 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS