jQuery限制圖片大小的方法
本文實(shí)例講述了jQuery限制圖片大小的方法。分享給大家供大家參考，具體如下：
最近在搞一個(gè)信息網(wǎng)站，文章內(nèi)容中可以顯示圖片，所以就需要限制用戶(hù)貼進(jìn)去的圖片的顯示大小了。
在網(wǎng)上找到一段代碼：
$(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());
}
}
});
});
用這個(gè)方法了實(shí)現(xiàn)運(yùn)行效果不穩(wěn)定，有時(shí)間圖片還沒(méi)有加載完畢就會(huì)先執(zhí)行了。
所以改用給所有需要限制大小的圖片綁定load事件的方法來(lái)實(shí)現(xiàn)，這樣保證了在每個(gè)圖片加載完后再分別執(zhí)行限制大小的代碼。代碼如下：
$(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());
}
}
});
});
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)圖片加載完成后改變圖片大小的方法
- 基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
- 基于jQuery的圖片大小自動(dòng)適應(yīng)實(shí)現(xiàn)代碼
- jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
- 使用jQuery清空f(shuō)ile文件域的解決方案
- jquery(live)中File input的change方法只起一次作用的解決辦法
- jQuery動(dòng)態(tài)添加 input type=file的實(shí)現(xiàn)代碼
- jQuery獲取file控件中圖片的寬高與大小
相關(guān)文章
利用javascript/jquery對(duì)上傳文件格式過(guò)濾的方法
jquery中對(duì)上傳文件格式過(guò)濾的方法,需要的朋友參考下。2009-07-07
jQuery pjax 應(yīng)用簡(jiǎn)單示例
此篇文章給大家分享了jQuery pjax 應(yīng)用的一些簡(jiǎn)單示例，希望可以幫助到大家2018-09-09
$.each遍歷對(duì)象、數(shù)組的屬性值并進(jìn)行處理
通過(guò)$.each，可以遍歷對(duì)象、數(shù)組的屬性值并進(jìn)行處理，下面有個(gè)示例，需要的朋友可以參考下2014-07-07
jQuery動(dòng)態(tài)增減行的實(shí)例代碼解析(推薦)
這篇文章主要介紹了jQuery動(dòng)態(tài)增減行的實(shí)例代碼解析,本文圖文并茂給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
使用jQuery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax
以往我們?cè)谧鯽jax時(shí),都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個(gè)請(qǐng)求都要建一個(gè)這樣的文件，非常麻煩，下面我們甩掉ashx和asmx來(lái)使用jQuery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax，需要的朋友參考下2016-08-08
深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
本篇文章主要是對(duì)jQuery中l(wèi)ive與bind方法的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
jQuery+ajax中g(shù)etJSON() 用法實(shí)例
這篇文章主要介紹了jQuery+ajax中g(shù)etJSON() 用法實(shí)例,需要的朋友可以參考下2014-12-12
jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(DOM操作)
下面小編就為大家?guī)?lái)一篇jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(DOM操作)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jValidate 基于jQuery的表單驗(yàn)證插件
網(wǎng)上基于jQuery的表單驗(yàn)證插件已有很多，但是這個(gè)輪子我還是繼續(xù)做一個(gè)，因?yàn)檫@個(gè)表單驗(yàn)證插件是從我以前的個(gè)人JS框架移值過(guò)來(lái)的（我已慢慢投入jQuery的懷抱），并且它的驗(yàn)證規(guī)則書(shū)寫(xiě)方式也許會(huì)讓你眼前一亮。2009-12-12
jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能
本文主要介紹了jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能的代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03