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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
Angular表单验证实例详解
Oct 20 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
vue项目中axios使用详解
Feb 07 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
JavaScript自定义超时API代码实例
Apr 30 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实现文件下载实例分享
2014/06/02 PHP
php中strtotime函数用法详解
2014/11/15 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
详解json在php中的应用
2018/09/30 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
jQuery使用手册之一
2007/03/24 Javascript
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
小程序实现投票进度条
2019/11/20 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python单例模式实例详解
2017/03/01 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
工地质量标语
2014/06/12 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
小学数学国培研修日志
2015/11/13 职场文书