请问如何用jquery识别图片并点击弹出层放大（一张图片非缩略和原图关系）

请问如何用jquery识别图片并点击弹出层放大（一张图片非缩略和原图关系）

类似如下效果：http://bbs.paidai.com/topic/148952


场景描述：

1.在html中有一张图片为test.jpg 实际宽度为500px，但css设置最大宽度显示为100px
2.但用户在html页中点击此图片时，自动弹出层显示此图原大小，即显示500px

谢谢您的答复 ！

2 个解决方案

#1

<img src="aaa.jpg" orgurl="aaa-big.jpg"/>//图片添加一个orgurl属性，就是他的实际路径
$(function(){
    $('img').click(function(){
        var url = $(this).attr('orgurl');//如果不想添加orgurl路径或者说src属性就是实际的路径这里可以改成$(this).attr('src')
        showBigImage(url,$(this));
    });
})
function showBigImage(url,obj){
    var maxWidth = 500;
    var offset = obj.offset();
    var start = {
        width:obj.attr('width')||parseInt(obj.css('width')),
        height:obj.attr('height')||parseInt(obj.css('height'))
    }
    $('<div></div>')
    .attr('id', 'div_img_cover')
    .css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': 9999, 
        'width': "100%", 
        'height': getWaitHeight(),
        'text-align': 'center',
        'font': 'bold 24px arial',
        'background-repeat': 'no-repeat',
        'background-position': 'center',
        'background-attachment': 'fixed',
        'opacity':0.8,
        'background':'#000'
        })
    .appendTo('body');
    
    var img = new Image();
    $(img).css(start);
    if(img.attachEvent){
        img.attachEvent('onload',imgLoaded)
    }else{
        img.addEventListener('load',imgLoaded,false);
    }
    img.src = url;
    function imgLoaded(){
        var imgWidth = img.width,imgHeight = img.height;
        var newWidth = imgWidth > maxWidth ? maxWidth : imgWidth;
        var newHeight = imgHeight/imgWidth*newWidth
        var end = {
            width:parseInt(newWidth),
            height:parseInt(newHeight)
        }
        var container = $('<div></div>').appendTo('body');
        container.css('position','absolute');
        container.css(offset);
        container.attr('id','container');
        container.append(img);
        var css = setElementCenter('#container',1,end);
        $(img).animate(end,200);
        container.animate(css,200);
        $('#div_img_cover').click(function(){
            var that = $(this);
            $(img).animate(start,200);
            container.animate(offset,200,function(){
                that.remove();
                $(this).remove();
            });
        });
    }
    
    function setElementCenter(selector,pos,finalSize){
        var position = $(selector).css('position')=='fixed';
        var winSize = myGetWinSize();
        var elementSize = finalSize || getElementSize(selector);
        var finalTop =(winSize.height-elementSize.height)/2 + parseInt((!position ? winSize.scrollTop : 0)),
            finalLeft=(winSize.width-elementSize.width)/2+winSize.scrollLeft;
        var finalCss = {
            left:finalLeft,
            top:position ? finalTop : (finalTop<winSize.scrollTop ? winSize.scrollTop : finalTop)
        }
        if(!pos){
            $(selector).css({'position':position ?'fixed' : 'absolute','z-index':10000});
            $(selector).css(finalCss);
        }
        $(selector).css({'z-index':10000});
        return finalCss;
    }
    function myGetWinSize(){
        var size = {
            width:document.documentElement.clientWidth || document.body.clientWidth,
            height:document.documentElement.clientHeight || document.body.clientHeight,
            scrollTop:$(window).scrollTop(),
            scrollLeft:$(window).scrollLeft()
        }
        return size;
    }
    function getElementSize(selector){
        return {
            width:$(selector).width(),
            height:$(selector).height()
        }
    }
    function getWaitHeight(){
        var scrollHeight,
            offsetHeight;
        // handle IE 6
        if ($.browser.msie && $.browser.version < 7) {
            scrollHeight = Math.max(
                 document.documentElement.scrollHeight,
                 document.body.scrollHeight
            );
            offsetHeight = Math.max(
                     document.documentElement.offsetHeight,
                     document.body.offsetHeight
            );
        
            if (scrollHeight < offsetHeight) {
                     return $(window).height() + 'px';
            } else {
                     return scrollHeight + 'px';
            }
        // handle "good" browsers
        } else {
            return $(document).height() + 'px';
        }
    }

#2

window.open('图片src');
一般都这样做,直接新窗口打开就ok了,一张图片而已,不用弹出层