图片由四周向中且由变大，由模糊变清晰代码

Question

想做个类似相册显示的贺卡，基本要求如题，求高人帮助、、、可以用jquery、、、

Answer 1

/*
功能：图片缩放效果js类，页面所有href指向图片的a标签都可以，如果有这样的a不需要缩放效果，设置 rel= "nozoom"
作者：hch
日期：2010-06-29
*/
function __zoom()
{
    this.speedTime = 3 ;       // 展开折叠速度 ，隔多少毫秒执行一次
    this.speedCount=10;       // 展开折叠渐变次数，多少次完成展开折叠
    var closeImgUrl = "files/Images/closebox.png";      // 关闭图片路径
    var closeHoverImgUrl = "files/Images/closebox1.png";      // 关闭图片Hover时的图片路径
    var waitingImgUrl = "files/Images/waiting.gif";
    var isIE = document.all?true:false;
    var obj = null;
    var showDiv=null;            // 显示大图的层
    var closeSpan = null;        // 关闭按钮
    var maxHeight=0;             // 放大图片的高度
    var maxWidth = 0;            // 放大图片的宽度
    var toLeft = 0;             // 弹出层最终的左坐标
    var toTop = 0;              // 弹出层的最终顶点坐标
    var fLeft = 0;              // 弹出层开始的左坐标
    var fTop = 0;                // 弹出层开始的顶点坐标
    var img = new Image();       // 加载弹出图片的img
    var viewImg = null;         // 放大的图片对象
    var imgHasLoad = false;       // 大图片是否加载完成
    var dWidth = 128;              // 默认宽度
    var dHeight = 128;              //默认高度
    var zoomTimer = null;
   this.initZooms=function() 
   {
        obj = this;
    var links = document.getElementsByTagName("a");
    for (i = 0; i < links.length; i++) {
    if (links[i].getAttribute("href")) {
    if (links[i].getAttribute("href").search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) {
    if (links[i].getAttribute("rel") != "nozoom") {
    links[i].onclick = function (e) { return obj.zoomClick(this); };
    links[i].onmouseover = function (e) { obj.loadImg(this); };
    }
    }
    }
    }
    };
    //获取第一个子节点
    this.getFirstChild = function(obj) { 
        var result = obj.firstChild; 
        while (result!=null && !result.tagName) { 
                result = result.firstChild; 
            } 
            return result; 
    }
    this.zoomClick=function(a, evt) 
    {   
         obj.closeViewImg();
         var tag = obj.getFirstChild(a);
         if(tag==null)tag=a;
         var point=obj.getPint(tag);
         fLeft = point[0] + tag.offsetWidth/2;
         fTop = point[1] + tag.offsetHeight/2;
         obj.createShowDiv();
    // 如果已经加载
    if (imgHasLoad) 
    {
        obj.preZoomout(a);
    } 
    else 
    {
        showDiv.style.height = dHeight+"px";
            showDiv.style.width = dWidth+"px";
            viewImg.src = waitingImgUrl;
    obj.waiting(a);
    }
    return false;
    
    };
    this.waiting = function(a)
    {
         if(imgHasLoad){
             obj.preZoomout(a);
         }else{
            setTimeout(function(){obj.waiting(a);},10);
         }
    };
    this.preZoomout=function(a)
    {
         if(showDiv==null){return;}
         maxWidth = img.width;
         maxHeight = img.height;
         toLeft = (getClientWidth() - maxWidth)/2;
         toTop =  (getClientHeight() - maxHeight)/2 + obj.getScrollTop();
         viewImg.src = a.getAttribute("href");
         viewImg.onclick = function(){obj.preZoomin(); };
 zoomTimer = setInterval(function(){obj.zoomout();},obj.speedTime);  // 放大
    };
    this.zoomout=function()
    {   
        if(showDiv==null){return;}
        var h = parseInt(showDiv.style.height);
        var w = parseInt(showDiv.style.width);
        var l = parseInt(showDiv.style.left);
        var t = parseInt(showDiv.style.top);
        var v = 0;
        if(h==maxHeight && w==maxWidth )
        {
            clearInterval(zoomTimer);
            return;
        }
        showDiv.style.zindex+= 10;
        if(h<maxHeight)
        {
            v = Math.round((maxHeight-h)/obj.speedCount);
    v = (v<1) ? 1 :v ;
    v+=h;
    showDiv.style.height=v+'px';
        }else{
             showDiv.style.height=maxHeight+'px';
        }
        if(w<maxWidth)
        {
            v = Math.round((maxWidth-w)/obj.speedCount);
    v = (v<1) ? 1 :v ;
    v+=w;
   showDiv.style.width=(v)+'px';
   if(isIE){
        showDiv.style.filter= 'alpha(opacity='+(v*50/maxWidth +50)+');';
   }else{
         showDiv.style.opacity = ((v*0.5)/maxWidth +0.5);
   }
        }else{
             showDiv.style.width=(maxWidth)+'px';
        }
        v = toLeft - l;
        if( Math.abs(v)>2)
        {
            v = v/obj.speedCount;
    v+=l;
    showDiv.style.left=v+'px';
        }
        v = toTop - t;
        if( Math.abs(v)>2)
        {
            v = v/obj.speedCount;
    v+=t;
    showDiv.style.top=v+'px';
        }
    };
    this.preZoomin=function()
    {
         clearInterval(zoomTimer);
         closeSpan.style.display="none";
         zoomTimer = setInterval(function(){obj.zoomin();},obj.speedTime);  // 缩小
    };
    this.zoomin=function()
    {
        if(showDiv==null){return;}
        var h = parseInt(showDiv.style.height);
        var w = parseInt(showDiv.style.width);
        var l = parseInt(showDiv.style.left);
        var t = parseInt(showDiv.style.top);
        var v = 0;
        if(h<10 || w<10 )
        {   
            obj.closeViewImg();
            clearInterval(zoomTimer);
            return;
        }
        showDiv.style.zindex -= 10;
        if(h>0)
        {
            v = Math.round(h/obj.speedCount);
    v = (v<1) ? 1 :v ;
    showDiv.style.height=(h-v)+'px';
        }else{
             showDiv.style.height='0px';
        }
        if(w>0)
        {
            v = Math.round(w/obj.speedCount);
    v = (v<1) ? 1 :v ;
   showDiv.style.width=(w-v)+'px';
   if(isIE){
        showDiv.style.filter= 'alpha(opacity='+(v*50/maxWidth +50)+');';
   }else{
         showDiv.style.opacity = ((v*0.5)/maxWidth +0.5);
   }
        }else{
             showDiv.style.width='0px';
        }
        v = fLeft - l;
        if( Math.abs(v)>2)
        {
            v = v/obj.speedCount;
    v+=l;
    showDiv.style.left=v+'px';
        }else{
             showDiv.style.left=fLeft+'px';
        }
        v = fTop - t;
        if( Math.abs(v)>2)
        {
            v = v/obj.speedCount;
    v+=t;
    showDiv.style.top=v+'px';
        }else{
             showDiv.style.top=fTop+'px';
        }
    }
    
    this.closeViewImg = function()
    {
        if(showDiv&&showDiv!=null&&showDiv.parentNode){ clearInterval(zoomTimer);zoomTimer=null;showDiv.parentNode.removeChild(showDiv);showDiv=null;closeSpan = null;viewImg=null;}
    };
    this.createShowDiv = function()
    {
       showDiv = document.createElement('div');
       showDiv.style.cssText='top:'+fTop+'px;left:'+fLeft+'px;position:absolute;width:10px;height:10px;z-index:9999;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity:0.5;';
       viewImg = document.createElement('img');
       viewImg.style.cssText='cursor:pointer;display:inline;border:0px;width:100%;height:100%;z-index:100;';
       showDiv.appendChild(viewImg); 
       closeSpan = document.createElement('span');
       closeSpan.style.cssText='top:5px;right:5px;position:absolute;width:30px;height:30px;z-index:1000;cursor:pointer;';
       if(isIE)
       {
            closeSpan.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +closeImgUrl + '\', sizingMethod=\'scale\')';
            closeSpan.onmouseout=function(){this.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + closeImgUrl + '\', sizingMethod=\'scale\')';};  
            closeSpan.onmouseover=function(){this.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + closeHoverImgUrl + '\', sizingMethod=\'scale\')';};
       }else{
             closeSpan.style.backgroundImage='url('+closeImgUrl+')';
             closeSpan.onmouseout=function(){this.style.backgroundImage='url('+closeImgUrl+')';};  
             closeSpan.onmouseover=function(){this.style.backgroundImage='url('+closeHoverImgUrl+')';};
       }
      closeSpan.onclick = function(){obj.preZoomin(); };
      showDiv.appendChild(closeSpan); 
      document.body.appendChild(showDiv);    
    };
    this.loadImg=function(a) 
    {
    var imgUrl = a.getAttribute("href");
    if (img.src.indexOf(imgUrl.substr(imgUrl.lastIndexOf("/"))) == -1) {
    imgHasLoad = false;
    img = new Image();
    img.onload = function() {
    imgHasLoad = true;
    }
    img.src = imgUrl;
    }
    };
     /********************
     * 取窗口滚动条滚动高度 
     ******************/
    this.getScrollTop=function ()
    {
       return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
    };
    /********************
     * 取窗口可视范围的高度 
     *******************/
    this.getClientHeight=function()
    {
       return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientHeight:document.documentElement.clientHeight;  
    };
     /********************
     * 取窗口可视范围的宽度 
     *******************/
    this.getClientWidth=function()
    { 
       return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientWidth:document.documentElement.clientWidth;  
    };
    this.getPint=function(e)
    {
    var x = 0;
    var y = 0;
    do {
    x += e.offsetLeft;
    y += e.offsetTop;
    } while ( e = e.offsetParent )
    return [x, y];
    }   
}

Answer 2

<ul>     
          <li><a href='files/Images/BabyBig/图片.jpg' >图片1</a></li> 
         <li><a href='files/Images/BabyBig/图片.jpg' >图片1</a></li> 
<li><a href='files/Images/BabyBig/图片.jpg' >图片1</a></li> 
<li><a href='files/Images/BabyBig/图片.jpg' >图片1</a></li> 
<li><a href='files/Images/BabyBig/大图片.jpg' ><img src='小图片'/></a></li> 
        </ul>
<script>
window.0nload=function(){var zoom=new __zoom();zoom.initZooms();};
</script>