jquery图片比例缩放插件

jquery图片比例缩放插件
参数名 参数说明
maxWidth 限制宽度,默认200px
maxHeight 限制高度,默认300px
effect 缩放方式,默认basic (basic-常规缩放 proportion-等比例缩放)

 

 

代码

   // 基于JQ的picResize图片缩放插件,
// 创建一个闭包    
(function($) {    
  //插件主要内容    
  $.fn.picResize = function(options){    
      // 处理默认参数  
      var opts = $.extend({}, $.fn.picResize.defaults, options); 
      return this.each(function()
      {
    var $this=$(this);
    var $images=$this.find("img");
    if($.browser.msie || $.browser.mozilla)
    {
    $images.each(function(){ 
      $.fn.picResize.effect[opts.effect](this,opts.maxWidth,opts.maxHeight);
    });
    }else
     {
    $images.each(function(){
      this.οnlοad=function(){
      $.fn.picResize.effect[opts.effect](this,opts.maxWidth,opts.maxHeight);
      }
    });
     }   
   }); 
      // 保存JQ的连贯操作结束
   };   
   $.fn.picResize.defaults = {
        maxWidth:200,
  maxHeight:300,
  effect:"basic"
    };
 $.fn.picResize.effect=
 {
  basic:function(drawImage,width,height){ 
      var fixwidth = width;  
      var fixheight =height; 
      w=drawImage.width;
   h=drawImage.height;
      if(w>fixwidth){drawImage.width=fixwidth;drawImage.height=h/(w/fixwidth);}  
      if(h>fixheight){drawImage.height=fixheight;drawImage.width=w/(h/fixheight);}        
      drawImage.style.cursor= "pointer";  
      drawImage.onclick = function(){window.open(this.src);}   
      drawImage.title = "点击查看原始图片";   
  },
  //等比例缩放
  proportion:function(drawImage,w,h){
   var image=new Image();
   image.src=drawImage.src;
   if(image.width>0 && image.height>0)
   {
    if(image.width/image.height>= w/h)
    {
        if(image.width>w)
     {
           drawImage.width=w;
          drawImage.height=(image.height*w)/image.width;
        }else{
             drawImage.width=image.width;
                 drawImage.height=image.height;
          }
    }else{
           if(image.height>h)
        {
            drawImage.height=h;
            drawImage.width=(image.width*h)/image.height;
           }else{
                 drawImage.width=image.width;
                 drawImage.height=image.height;
             }
      }
   }   
  }
    }
// 闭包结束    
})(jQuery);

你可能感兴趣的:(css,jquery,javascript)