快捷導(dǎo)航

jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法

更新時間：2015年07月17日 10:00:06 作者：答復(fù)哈

這篇文章主要介紹了jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法。分享給大家供大家參考。具體如下：

(function($){
 $.fn.resizeimage = function(){
  var imgLoad = function (url, callback) {
   var img = new Image();
   img.src = url;
   if (img.complete) {
    callback(img.width, img.height);
   } else {
    img.onload = function () {
     callback(img.width, img.height);
     img.onload = null;
    };
   };
  };
  var original = {
   width:$(window).width()
  };
  return this.each(function(i,dom){
   var image = $(this);
   imgLoad(image.attr('src'),function(){
    var img = {
     width:image.width(),
     height:image.height()
    },percentage=1;
    if(img.width<original.width){
     percentage = 1;
    }else{
     percentage = (original.width)/img.width;
    }
    image.width(img.w=img.width*percentage-30).height(img.h=img.height*percentage);
    $(window).resize(function(){
     var w = $(this).width();
     percentage = w/img.width>1?1:w/img.width;
     var newWidth = img.width*percentage-30;
     var newHeight = img.height*percentage;
     image.width(newWidth).height(newHeight);
    });
   });
  });
 };
})(jQuery);

希望本文所述對大家的jquery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

全面解析標(biāo)簽頁的切換方式
這篇文章主要介紹了標(biāo)簽頁的切換方式,介紹的非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-08-08
jQuery插件實現(xiàn)手風(fēng)琴二級菜單
這篇文章主要為大家詳細(xì)介紹了jQuery插件實現(xiàn)手風(fēng)琴二級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
jquery實現(xiàn)用戶信息修改驗證輸入方法匯總
這篇文章主要介紹了jquery實現(xiàn)用戶信息修改驗證輸入方法,實例匯總了jquery常用的提交、驗證、判定、修改等相關(guān)技巧,非常實用,需要的朋友可以參考下
2015-07-07
jQuery .tmpl() 用法示例介紹
解決 PHP 拼數(shù)據(jù)這方面的問題而有了 Smarty 這些模版，JavaScript 也可以利用模版來解決這些問題，比如基于 jQuery 的 jquery.tmpl
2014-08-08
jQuery 刪除或是清空某個HTML元素示例
刪除HTML元素可以使用remove及empty，下面有關(guān)這兩個方法的使用將以示例的方式為大家介紹下
2014-08-08
jQuery 性能優(yōu)化手冊推薦
現(xiàn)在jquery應(yīng)用的越來越多, 有些同學(xué)在享受爽快淋漓coding時就將性能問題忽略了, 比如我. jquery雖在諸多的js類庫中性能表現(xiàn)還算優(yōu)秀, 但畢竟不是在用原生的javascript開發(fā), 性能問題還是需要引起重視的.
2010-02-02
jQuery 1.9.1源碼分析系列（十三）之位置大小操作
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十三）之位置大小操作的相關(guān)資料,需要的朋友可以參考下
2015-12-12
jQuery Div中加載其他頁面的實現(xiàn)代碼
在做一個表單簽核系統(tǒng)時，需在要簽核頁面中將表單內(nèi)容（事先做好的PHP頁面）顯示出來，于就是想能不能利用Ajax技術(shù)把這個事先做好的頁面嵌入到簽核頁面中呢？
2009-02-02
日期時間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)
下面小編就為大家?guī)硪黄掌跁r間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jquery+CSS實現(xiàn)懸浮登錄框遮罩
這篇文章主要為大家詳細(xì)介紹了jquery+CSS實現(xiàn)懸浮登錄框遮罩，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03