<!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>