`
axl234
  • 浏览: 266250 次
  • 性别: 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作为一款强大的JavaScript库,提供了丰富的功能来处理DOM操作...

    JQuery实现等比缩放图片插件

    这个插件可以帮助我们在页面加载或窗口大小改变时自动调整图片的尺寸,使其等比例缩放。以下是一般步骤: 1. **引入JQuery库**:确保你的HTML文件中已经引入了JQuery库,这可以通过CDN链接或者本地文件引用完成。 ...

    jQuery图片缩放插件.zip

    《jQuery图片缩放插件深度解析》 在Web开发领域,jQuery库因其简洁的API和强大的功能而广受开发者喜爱。对于图片展示和交互,jQuery提供了丰富的插件,其中之一便是"jQuery图片缩放插件"。这个插件主要用于增强网页...

    Jquery图片放大查看插件

    **jQuery图片放大查看插件详解** 在Web开发中,为用户提供高质量的图片浏览体验是至关重要的,特别是当网站包含大量的图像资源时。jQuery作为一个轻量级、功能丰富的JavaScript库,为开发者提供了各种便利的插件,...

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

    "jQuery图片等比例缩放图片左右垂直居中"这一技术就是为了应对这样的挑战。jQuery是一个广泛使用的JavaScript库,它提供了丰富的API和便捷的DOM操作方法,使得实现这个功能变得相对简单。 首先,我们要理解图片等...

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

    本教程将详细讲解如何使用`jQuery`实现图片预加载和自动等比例缩放功能,创建一个高效、响应式的图片插件。 一、图片预加载 图片预加载技术是为了提升用户体验,避免用户在浏览网页时因为图片加载缓慢而看到空白...

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

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

    jQuery图片等比例缩放截取显示代码.zip

    "jQuery图片等比例缩放截取显示代码" 是一种解决图片在不同尺寸屏幕下不失真的技术,它利用jQuery库和一个名为jQThumb的插件实现。这里我们将深入探讨这个技术的工作原理、实现方式以及其优势。 首先,jQuery是一个...

    jquery图片同比例缩放

    在网页设计中,图片的展示效果对于用户体验至关重要。...总之,jQuery的`LoadImage`插件提供了一种方便的方法来处理图片的同比例缩放,通过合理的参数配置和优化策略,可以有效地改善网页的视觉效果和性能。

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

    在Web开发中,对图片进行等比例缩放是一项常见的功能需求...总的来说,这个插件利用了jQuery提供的强大功能,通过简单的API调用就可以实现复杂的图片等比例缩放效果,极大地方便了前端开发人员在处理图片显示时的需求。

    jQuery图片等比例缩放插件

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

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

    【可缩放jQuery图片裁剪插件】是一个用于网页图像编辑的工具,它基于流行的JavaScript库jQuery构建。这款插件提供了丰富的功能,使得用户在网页上可以自由地裁剪、旋转和调整图片尺寸,从而满足各种图像处理需求。在...

    imageQ图片缩放拖拽jQuery小插件

    **imageQ图片缩放拖拽jQuery小插件详解** 在网页设计中,用户交互体验是至关重要的,而图片作为网页内容的重要组成部分,如何提供便捷、直观的操控方式以提升用户体验呢?`imageQ`就是这样一款基于jQuery的插件,它...

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

    "jQuery图片等比例缩放图片左右垂直居中"这个话题聚焦于如何利用jQuery库解决这个问题。jQuery,作为一款强大的JavaScript库,简化了DOM操作、事件处理以及动画效果,使得在网页上实现复杂的功能变得更加简单。 ...

    基于jquery的图片裁剪插件

    许多图片裁剪插件还支持高级特性,如旋转、缩放、镜像、拖拽等。同时,可以通过API自定义UI、设置裁剪限制、处理多张图片等,以满足各种复杂场景的需求。 综上所述,基于jQuery的图片裁剪插件通过结合HTML5的Canvas...

    jQuery图片缩放插件jQThumb.zip

    **jQuery图片缩放插件jQThumb** 在Web开发中,图片处理是一项常见的任务,特别是对于网站的用户体验和页面加载速度至关重要。为了有效地管理和展示图片,开发者常常会使用各种插件来实现图片的预览、缩放和裁剪功能...

    jQuery支持局部缩放图片放大镜插件.zip

    本资源"jQuery支持局部缩放图片放大镜插件.zip"显然是一个利用jQuery实现的图像查看功能增强工具,特别适合于电子商务网站、产品展示页面以及任何需要详细查看图片细节的场合。这个插件提供了两种图片缩放模式:图片...

Global site tag (gtag.js) - Google Analytics