Jq 网页点击图片放大效果（单张）

首先引入jq文件:  <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

$(function(){
    $('.slideBox1 p span img,.slideBox1 p img,.slideBox1 img').click(function(){
        var url = $(this).attr('src');//如果不想添加orgurl路径或者说src属性就是实际的路径这里可以改成$(this).attr('src')
        showBigImage(url,$(this));
    });
})
function showBigImage(url,obj){
    var maxWidth = 800;   //限制图片的最大宽度
    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*1.5,imgHeight = img.height*1.5;    //设置图片放大的比例，最好保持宽高放大等比
        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';
        }
    }}
</script>

效果如下：