jQuery限制圖片大小的方法
本文實例講述了jQuery限制圖片大小的方法。分享給大家供大家參考,具體如下:
最近在搞一個信息網(wǎng)站,文章內(nèi)容中可以顯示圖片,所以就需要限制用戶貼進去的圖片的顯示大小了。
在網(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()); } } }); });
用這個方法了實現(xiàn)運行效果不穩(wěn)定,有時間圖片還沒有加載完畢就會先執(zhí)行了。
所以改用給所有需要限制大小的圖片綁定load事件的方法來實現(xiàn),這樣保證了在每個圖片加載完后再分別執(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()); } } }); });
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jQuery+slidereveal實現(xiàn)的面板滑動側邊展出效果
WEB開發(fā)中有時需要在頁面上設置一個控制面板,默認是不顯示的,當用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч1疚膶⑹褂胘Query插件并結合實例給大家介紹一下面板滑動展示效果。2015-03-03jQuery加PHP實現(xiàn)圖片上傳并提交的示例代碼
這篇文章主要介紹了jQuery加PHP實現(xiàn)圖片上傳并提交的實例,文中講解非常細致,代碼幫助大家更好的理解和學習,感興趣的朋友可以了解下2020-07-07jQuery Attributes(屬性)的使用(一、屬性篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,文章分為:屬性篇、類篇、Html代碼篇&文本篇、值篇共4篇文章。2009-12-12