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使用指南之enumerable.js
Jan 10 Javascript
经常用到的JavasScript事件的翻译
Apr 09 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 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命名空间(Namespace)简明教程
2014/06/11 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
幼儿园消防演练方案
2014/02/13 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
英文商务邀请函范文
2015/01/31 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
如何使用pdb进行Python调试
2021/06/30 Python
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL