`
axl234
  • 浏览: 260528 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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.onload=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);

分享到:
评论

相关推荐

    jquery图片插件设置图片等比例缩放.rar

    jquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置...

    jquery图片插件设置图片等比例缩放

    不论图片大小宽度,jquery均可实现图片等比例大小缩放,程序自动设置等高或者等宽的比例缩放你所录入的图片

    使用jQuery实现图片预加载和自动等比例缩放插件

    使用jQuery实现图片预加载和自动等比例缩放插件

    jQuery图片裁剪插件 功能非常强大

    今天我们要来介绍一款基于jQuery的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠标拖动。 来看看实现的...

    jQuery图片等比例缩放插件

    内容索引:脚本资源,jQuery,等比例缩放,jQuery图片放大 jquery-image-resize图片等比缩放调整插件,这个用在前台可能比较实用吧,一般情况下,我们不希望经过放大或缩小的图片会失去比例,变得很难看,在一些要求较...

    可缩放jQuery图片裁剪插件.zip

    可缩放jQuery图片裁剪插件是一款可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠标拖动。

    用jquery实现等比例缩放图片效果插件

    用jquery实现图片等比例缩放的代码,以插件的形式编写,需要的朋友可以参考下。

    jquery 图片预加载 自动等比例缩放插件

    此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大高 height 图片最大宽 loadpic 加载...

    jquery上传图片预览插件

    兼容火狐和ie 说明:图片上传预览插件 上传的时候可以生成固定宽高范围内的等比例缩放图

    jquery图片等比例缩放图片左右垂直居中

    在前端开发中,有时候在展示很多图片的时候,由于图片的长宽不一致,需要将图片按照左右垂直居中的方式来显示,改插件实例就是按照这种方式来实现的。

    asp.net jQuery实现图片等比例自动缩放

    **************图片预加载插件****************** ...scaling 是否等比例自动缩放 width 图片最大高 height 图片最大宽 loadpic 加载中的图片路径 */ jQuery.fn.LoadImage=function(scaling,width,height,loadpic)

    jQuery图片等比例缩放图片左右垂直居中

    在前端开发中,有时候在展示很多图片的时候,由于图片的长宽不一致,需要将图片按照左右垂直居中的方式来显示,改插件实例就是按照这种方式来实现的。

    jQuery.jqthumb插件让你的图片始终保持等比例排列

    今天给大家推荐一个jQuery插件 它可以将你的图片平铺起来,作为背景图片显示到当前div列表中 可惜,低版本浏览器不支持,因为其中使用了css3代码 使用方法: 1、将head中的样式复制到你的样式表中 ...

    jQuery-Fakecrop JS图片等比例缩放裁切插件及示例

    jQuery-Fakecrop是一款基于jquery的图片等比例缩放插件,用户使用插件后可方便的在网页固定宽度和高度的区域显示图片,JS方式调用,如示例所示,可设置限制宽度和不限制宽度,图片显示时候自动裁切,以满足对布局的...

    jQuery响应式网格图片画廊插件.zip

    mosaic.js是一款响应式网格图片画廊插件。该插件为所有图片提供统一的高度,图片按照自身比例进行缩放。制作出的效果类似于Flick和谷歌 的图片画廊效果。

    拖拽拉伸缩放插件l_zoom

    拖拽拉伸缩放插件l_zoom, 包含 自由缩放 和 等比例缩放 模式 经典还远网页文本框操作简单

    jQuery头像裁剪插件 支持自定义上传图片

    这是一款非常实用的jQuery头像裁剪插件,利用这款插件,我们可以对用户上传的头像图片进行区域的选定,然后按照约定的比例进行裁剪。这款jQuery头像裁剪插件不仅支持图片的缩放,而且支持用户自定义上传图片,简单...

Global site tag (gtag.js) - Google Analytics