jquery图片比例缩放插件
jquery图片比例缩放插件参数名参数说明maxWidth限制宽度,默认200pxmaxHeight限制高度,默认300pxeffect缩放方式,默认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);
