图片放大，位置变换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript">
function $(ID)
{
    return document.getElementById(ID);
}

var num = 0;

function zoom(imgwidth,imgheight,imgtop,imgleft)
{
    iwidth=parseInt(imgwidth);
    iheight=parseInt(imgheight);
    itop=parseInt(imgtop);
    ileft=parseInt(imgleft);
    zoom1(num);
}

function zoom1(num)
{
    $("imgID").style.display="";
    if( num<0.9)
    {
        num = num+0.1;
        $("imgID").style.width=iwidth*num+"px";
        $("imgID").style.height=iheight*num+"px";
        $("imgID").style.top=itop*num+"px";
        $("imgID").style.left=ileft*num+"px";
        $("imgID").style.filter="Alpha(opacity="+(num*2)*100+")";
        setTimeout("zoom1("+num+")",50);
    }
    else
    {
        $("imgID").style.width=iwidth+"px";
        $("imgID").style.height=iheight+"px";
        $("content").style.display="";
        $("imgID").style.display="none";
        $("tijiao").style.display="none";
    }
}

</script>

</head>

<body>
<img id="imgID" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" style="position:absolute; z-index:1; display: none;" />
<div id="content" style="286px; height:110px;top:200px;left:300px; position:absolute; z-index:2; display: none; background:url(http://www.google.cn/intl/zh-CN/images/logo_cn.gif)" ></div>
<input id="tijiao" type="button" onclick="zoom('286','110','200','300')" style=" display:block" />
</body>
</html>

---------------------------------------------------------------------

第二方案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style type="text/css">
.btxg {
background:transparent url(http://image.bitauto.com/bitauto/price/20071220/styles/images/index_49.gif) no-repeat scroll 0%;
border:0pt none;
height:19px;
margin:0pt 30px 0pt 0pt;
104px;
}
</style>

<script type="text/javascript">
// JScript 文件
function $(ID){ return document.getElementById(ID);}
//初始化变量
var SlideImg={
    ImgObj:null,
    ImgWidth:0,
    ImgHeight:0,
    MarTop:0,
    MarLeft:0,
    DivObj:null,
};

function InitSlideImg(ImgId,iWidth,iHeight,iOffsetTop,iOffsetLeft,DivId)
{
    var iSpeed=0.02;
    SlideImg.ImgObj=$(ImgId);//imid 图片id
    SlideImg.ImgWidth=iWidth;//gwidth图片宽度
    SlideImg.ImgHeight=iHeight;//gheight图片高度
    SlideImg.MarTop=iOffsetTop;//wtop按钮所在相对顶部的位置
    SlideImg.MarLeft=iOffsetLeft;//wtop按钮所在相对左边的位置
    SlideImg.DivObj=$(DivId);//diid真实搜索框id
    SlideImg.ImgObj.style.display="";
    MoveImg(iSpeed);
}
//动画效果
function MoveImg(iSpeed)
{
    iSpeed=iSpeed+0.2;//递增
    SlideImg.ImgObj.style.width=iSpeed*SlideImg.ImgWidth+"px";//宽度按百分比变宽
    SlideImg.ImgObj.style.height=iSpeed*SlideImg.ImgHeight+"px";//高度按百分比变高
    SlideImg.ImgObj.style.marginTop=SlideImg.MarTop-SlideImg.MarTop*iSpeed+"px";//相对与顶部位置递减
    SlideImg.ImgObj.style.marginLeft=SlideImg.MarLeft-SlideImg.MarLeft*iSpeed+"px";//相对与左边位置递减
    SlideImg.ImgObj.style.filter="Alpha(opacity="+(iSpeed*2)*100+")";//不透明度变高
    if(iSpeed<1)//递增到1，停止运行
    {
        loop=setTimeout("MoveImg("+iSpeed+")",50);
    }
    else
    {
        SlideImg.ImgObj.style.display="none";//关闭图片
        SlideImg.DivObj.style.display="none";//关闭图片
        InitSearchStrip();//显示真实搜索框
    }
}

</script>
</head>

<body>

<div style=" 950px; text-align: left; position: absolute; z-index: 100; margin-left: -500px;" id="divOnLoad"><img style=" 0px; height: 0px; position: absolute; z-index: 100; display: none;" src="http://image.bitauto.com/bitauto/price/20071220/styles/images/sousuotiao.gif" id="img1"/></div>

<input id="rsearchbt" type="button" onclick="InitSlideImg('img1','950','73','0','950','divOnLoad');" class="btxg" style="margin: 75px 0pt 0pt 480px; z-index: 999; position: absolute; display: block;"/>

</body>
</html>