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程序设计有所帮助。
相关文章
jquery UI Datepicker时间控件的使用方法（基础版）
这篇文章主要介绍了jquery ui datepicker时间控件的使用方法，需要的朋友可以参考下2015-11-11
使用EasyUI最好的方法不是学会，所有的东西都敲一遍，你也没办法敲得完，而是找到一个好的文档。本文提供文档的下载，并对jQueryEasyUI的使用进行实例解析，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了使用jQuery处理AJAX请求的基础学习教程,除此之外还引申了链式处理事件回调的写法,由浅入深非常值得借鉴,需要的朋友可以参考下2016-05-05
使用jQuery.form.js/springmvc框架实现文件上传功能
这篇文章主要介绍了使用jQuery.form.js/springmvc框架实现文件上传功能，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
如何避免JQuery Dialog的内存泄露，需要的朋友可以参考下。2010-06-06
下面小编就为大家带来一篇zTree jQuery 树插件的使用(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了jQuery实现设置、移除文本框默认值功能,本文实现是类似html5 placeholder（空白提示）效果,正常时文本框有提示文字,当文本框获得焦点时变为空白,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇jQuery效果函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
这篇文章主要介绍了jQuery实现多级动画效果菜单代码,涉及jquery针对页面元素的遍历及事件绑定操作页面元素样式变换的技巧,界面美观实用,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
今天遇到一个有意思的问题，jquery有两个函数parent()和parents().通过这两个函数可以找到一个对象的父对象，又称作jquery的选择器。2010-11-11
最新评论