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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 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+MSSQL分页的例子
2006/10/09 PHP
实用函数8
2007/11/08 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
php显示页码分页类的封装
2017/06/08 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
JavaScript中Function详解
2015/02/27 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Python实现端口复用实例代码
2014/07/03 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python hook监听事件详解
2018/10/25 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
几个人围成一圈的问题
2013/09/26 面试题
园林技术个人的自我评价
2014/01/08 职场文书
毕业自我评价
2014/02/05 职场文书
《阳光》教学反思
2014/02/23 职场文书
公益广告标语
2014/06/19 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
创先争优承诺书
2015/01/20 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
MySQL分区以及建索引的方法总结
2022/04/13 MySQL