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 xml为数据源的下拉框控件
Jul 07 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
原生js生成图片验证码
Oct 11 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
Terran剧情介绍
2020/03/14 星际争霸
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
JavaScript中this用法学习笔记
2019/03/17 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python安装scipy的方法步骤
2019/06/26 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
总经理助理岗位职责
2013/11/08 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
python处理json数据文件
2022/04/11 Python