jQuery限制图片大小的方法
更新时间：2016年05月25日 10:22:37 作者：懒人
这篇文章主要介绍了jQuery限制图片大小的方法,对比分析了常见的jQuery限制图片操作方法及改进方法,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
利用javascript/jquery对上传文件格式过滤的方法
jquery中对上传文件格式过滤的方法,需要的朋友参考下。2009-07-07
此篇文章给大家分享了jQuery pjax 应用的一些简单示例，希望可以帮助到大家2018-09-09
通过$.each，可以遍历对象、数组的属性值并进行处理，下面有个示例，需要的朋友可以参考下2014-07-07
这篇文章主要介绍了jQuery动态增减行的实例代码解析,本文图文并茂给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
使用jQuery Ajax 请求webservice来实现更简练的Ajax
以往我们在做ajax时,都要借助于一般处理程序(.ashx)或web服务(.asmx),并且每一个请求都要建一个这样的文件，非常麻烦，下面我们甩掉ashx和asmx来使用jQuery Ajax 请求webservice来实现更简练的Ajax，需要的朋友参考下2016-08-08
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了jQuery+ajax中getJSON() 用法实例,需要的朋友可以参考下2014-12-12
下面小编就为大家带来一篇jQuery基础知识点总结(DOM操作)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
网上基于jQuery的表单验证插件已有很多，但是这个轮子我还是继续做一个，因为这个表单验证插件是从我以前的个人JS框架移值过来的（我已慢慢投入jQuery的怀抱），并且它的验证规则书写方式也许会让你眼前一亮。2009-12-12
本文主要介绍了jQuery实现Select下拉列表进行状态选择功能的代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
最新评论