jQuery限制图片大小的方法


Posted in Javascript onMay 25, 2016

本文实例讲述了jQuery限制图片大小的方法。分享给大家供大家参考,具体如下:

最近在搞一个信息网站,文章内容中可以显示图片,所以就需要限制用户贴进去的图片的显示大小了。

在网上找到一段代码:

$(document).ready(function(){
  $("#viewnews_body img").each(function(){
    var width = 620;
    var height = 600;
    var image = $(this);
    if (image.width() > image.height()){
      if(image.width()>width){
        image.width(width);
        image.height(width/image.width()*image.height());
      }
    }else{
      if(image.height()>height){
        image.height(height);
        image.width(height/image.height()*image.width());
      }
    }
  });
});

用这个方法了实现运行效果不稳定,有时间图片还没有加载完毕就会先执行了。

所以改用给所有需要限制大小的图片绑定load事件的方法来实现,这样保证了在每个图片加载完后再分别执行限制大小的代码。代码如下:

$(document).ready(function(){
  $("#viewnews_body img").bind("load",function(){
    var width = 620;
    var height = 600;
    var image = $(this);
    if (image.width() > image.height()){
      if(image.width()>width){
        image.width(width);
        image.height(width/image.width()*image.height());
      }
    }else{
      if(image.height()>height){
        image.height(height);
        image.width(height/image.height()*image.width());
      }
    }
  });
});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
javascript new fun的执行过程
Aug 05 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
js实现批量删除功能
Aug 27 Javascript
jQuery中设置form表单中action值的实现方法
May 25 #Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 #Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 #Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 #Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 #Javascript
BootStrap的Datepicker控件使用心得分享
May 25 #Javascript
jquery按回车键实现表单提交的简单实例
May 25 #Javascript
You might like
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
React实现全选功能
2020/08/25 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
python字典改变value值方法总结
2019/06/21 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Python二元算术运算常用方法解析
2020/09/15 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
班级年度安全计划书
2014/05/01 职场文书
村庄环境整治方案
2014/05/15 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
班级文化标语
2014/06/23 职场文书
住房租房协议书
2014/08/20 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
课题研究阶段性总结
2015/08/13 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python