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中实现函数数组的方法
Dec 25 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
学习jQuey中的return false
Dec 18 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
layui原生表单验证的实例
Sep 09 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
Node.js实现断点续传
Jun 23 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 指定范围内多个随机数代码实例
2016/07/18 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
几种tab切换详解
2017/02/03 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
js实现右键弹出自定义菜单
2020/09/08 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
postman和python mock测试过程图解
2020/02/22 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
行政人员工作职责
2013/12/05 职场文书
中秋节活动总结
2014/08/29 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python