欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery限制圖片大小的方法

 更新時間:2016年05月25日 10:22:37   作者:懶人  
這篇文章主要介紹了jQuery限制圖片大小的方法,對比分析了常見的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 獲取checkbox的checked問題

    Jquery 獲取checkbox的checked問題

    這個郁悶了,今天寫這個功能的時候發(fā)現(xiàn)了問題,上網(wǎng)找了好多資料對照,更加糾結
    2011-11-11
  • jQuery+ajax+asp.net獲取Json值的方法

    jQuery+ajax+asp.net獲取Json值的方法

    這篇文章主要介紹了jQuery+ajax+asp.net獲取Json值的方法,涉及jQuery的ajax技術與asp.net后臺交互的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • Jquery.addClass始終無效原因分析

    Jquery.addClass始終無效原因分析

    Jquery.addClass無效的情況想必有很多的朋友都有遇到過吧,下面為大家詳細的分析下,感興趣的朋友可不要錯過了哈
    2013-09-09
  • jQuery簡單獲取DIV和A標簽元素位置的方法

    jQuery簡單獲取DIV和A標簽元素位置的方法

    這篇文章主要介紹了jQuery簡單獲取DIV和A標簽元素位置的方法,結合實例形式分析了jQuery針對頁面div及A標簽元素相關操作技巧,需要的朋友可以參考下
    2017-02-02
  • jQuery實現(xiàn)二維碼掃描功能

    jQuery實現(xiàn)二維碼掃描功能

    這篇文章主要 介紹了jQuery利用jquery.qrcode.min.js插件實現(xiàn)二維碼掃描功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • jquery.jsPlumb實現(xiàn)拓撲圖

    jquery.jsPlumb實現(xiàn)拓撲圖

    這篇文章主要為大家詳細介紹了jquery.jsPlumb實現(xiàn)拓撲圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • jQuery+slidereveal實現(xiàn)的面板滑動側邊展出效果

    jQuery+slidereveal實現(xiàn)的面板滑動側邊展出效果

    WEB開發(fā)中有時需要在頁面上設置一個控制面板,默認是不顯示的,當用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч1疚膶⑹褂胘Query插件并結合實例給大家介紹一下面板滑動展示效果。
    2015-03-03
  • jQuery加PHP實現(xiàn)圖片上傳并提交的示例代碼

    jQuery加PHP實現(xiàn)圖片上傳并提交的示例代碼

    這篇文章主要介紹了jQuery加PHP實現(xiàn)圖片上傳并提交的實例,文中講解非常細致,代碼幫助大家更好的理解和學習,感興趣的朋友可以了解下
    2020-07-07
  • jquery實現(xiàn)簡單的二級導航下拉菜單效果

    jquery實現(xiàn)簡單的二級導航下拉菜單效果

    這篇文章主要介紹了jquery實現(xiàn)簡單的二級導航下拉菜單效果,涉及jquery鼠標事件動態(tài)操作頁面元素樣式及Ajax調(diào)用的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • jQuery Attributes(屬性)的使用(一、屬性篇)

    jQuery Attributes(屬性)的使用(一、屬性篇)

    本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,文章分為:屬性篇、類篇、Html代碼篇&文本篇、值篇共4篇文章。
    2009-12-12

最新評論