ホームページ  >  記事  >  ウェブフロントエンド  >  ブラウザウィンドウのサイズに応じて画像を自動的に拡大縮小するjqueryメソッド_jquery

ブラウザウィンドウのサイズに応じて画像を自動的に拡大縮小するjqueryメソッド_jquery

WBOY
WBOYオリジナル
2016-05-16 15:50:071354ブラウズ

この記事の例では、jquery がブラウザー ウィンドウのサイズに応じて画像を自動的に拡大縮小する方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

(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&#63;1:w/img.width;
     var newWidth = img.width*percentage-30;
     var newHeight = img.height*percentage;
     image.width(newWidth).height(newHeight);
    });
   });
  });
 };
})(jQuery);

この記事が皆さんの jquery プログラミング設計に役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。