AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
jquery,浏览器窗口,缩放,图片

本文实例讲述了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程序设计有所帮助。


jquery,浏览器窗口,缩放,图片  
上一篇:用svg制作富有动态的tooltip  下一篇:JavaScript调用浏览器打印功能实例分析