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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
JavaScript实现消消乐的源代码
Jan 12 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js星星评分效果
2014/07/24 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
python实现ipsec开权限实例
2014/11/11 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
施工单位安全责任书
2014/07/24 职场文书
简单租房协议书范本
2014/08/20 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
红色影片观后感
2015/06/18 职场文书
庆元旦主持词
2015/07/06 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript