首页 > 编程 > JavaScript > 正文

jquery实现根据浏览器窗口大小自动缩放图片的方法

2019-11-20 12:02:10
字体:
来源:转载
供稿:网友

本文实例讲述了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?1:w/img.width;     var newWidth = img.width*percentage-30;     var newHeight = img.height*percentage;     image.width(newWidth).height(newHeight);    });   });  }); };})(jQuery);

希望本文所述对大家的jquery程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表