jQuery限制圖片大小的方法
本文實(shí)例講述了jQuery限制圖片大小的方法。分享給大家供大家參考,具體如下:
最近在搞一個(gè)信息網(wǎng)站,文章內(nèi)容中可以顯示圖片,所以就需要限制用戶貼進(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)容感興趣的讀者可查看本站專題:《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)文章
Jquery 獲取checkbox的checked問(wèn)題
這個(gè)郁悶了,今天寫(xiě)這個(gè)功能的時(shí)候發(fā)現(xiàn)了問(wèn)題,上網(wǎng)找了好多資料對(duì)照,更加糾結(jié)2011-11-11jQuery簡(jiǎn)單獲取DIV和A標(biāo)簽元素位置的方法
這篇文章主要介紹了jQuery簡(jiǎn)單獲取DIV和A標(biāo)簽元素位置的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面div及A標(biāo)簽元素相關(guān)操作技巧,需要的朋友可以參考下2017-02-02jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D
這篇文章主要為大家詳細(xì)介紹了jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開(kāi)發(fā)中有時(shí)需要在頁(yè)面上設(shè)置一個(gè)控制面板,默認(rèn)是不顯示的,當(dāng)用戶有需要時(shí)可以通過(guò)按鈕觸發(fā)調(diào)用面板展示。常見(jiàn)的有頁(yè)面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。2015-03-03jQuery加PHP實(shí)現(xiàn)圖片上傳并提交的示例代碼
這篇文章主要介紹了jQuery加PHP實(shí)現(xiàn)圖片上傳并提交的實(shí)例,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07jquery實(shí)現(xiàn)簡(jiǎn)單的二級(jí)導(dǎo)航下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的二級(jí)導(dǎo)航下拉菜單效果,涉及jquery鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式及Ajax調(diào)用的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery Attributes(屬性)的使用(一、屬性篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,文章分為:屬性篇、類篇、Html代碼篇&文本篇、值篇共4篇文章。2009-12-12