一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Jquery图片等比缩放与Chrome加载图片问题

时间:2013-10-06 编辑:简简单单 来源:一聚教程网

images.js文件

 代码如下 复制代码

function ResizeImage(obj,color){
    if(obj.length>1){alert('select error');return;}
    if(color==undefined){color='#ffffff';} 
    var width=obj.attr('oldwidth');
    var height=obj.attr('oldheight'); 
    if(width==undefined){width=obj.attr('width');height=obj.attr('height');} 
    var pos=obj.attr('pos');
    if(pos==undefined){pos=0;}
    var src=obj.attr('src');
    var img=new Image();
    img.src=src;
    var oldwidth=img.width;
    var oldheight=img.height; 
    var pw=width/oldwidth;
    var ph=height/oldheight;
    var left=0;
    var top=0; 
    if(pw         img.width=width;
        img.height=oldheight*pw;
        top=parseInt((height-img.height)/2);
    }else{
        img.height=height;
 img.width=oldwidth*ph;
 left=parseInt((width-img.width)/2);
    }
    obj.attr('width',img.width);
    obj.attr('height',img.height);
    obj.attr('oldwidth',width);
    obj.attr('oldheight',height);
    obj.attr('src',img.src);
    obj.css('position','absolute');
    obj.css('left',left);
    if(pos==1){obj.css('bottom',0);}
    if(pos==0){obj.css('top',top);}
    if(pos==-1){obj.css('top',0)} 
    //包裹
    if(obj.parent("div[autosize='yes']").length==0){
        var div=document.createElement('div');
 $(div).css('width',width);
 $(div).css('height',height);
 $(div).css('position','relative');
 $(div).css('border','none');
 $(div).attr('autosize','yes');
 $(div).css('background-color',color);
 obj.wrap(div);
    }
    delete img;
}
jQuery.fn.extend({
    autosize:function(color){
        this.each(function(){
            ResizeImage($(this),color); 
 })
    }
});

html代码

 代码如下 复制代码


玉米串www.111com.net





 




这里有一个问题需要注意,在加载图片机制上Chorme浏览器比较特别,导致有时获取不到图片的宽和高,从而影响js的操作。
说以我们要先用Jquery的$.browser.webkit方法判断浏览器是否为谷歌浏览器,再用.load()方法使得图片加载完成后再执行相应的操作。

热门栏目