阿里应聘答题
（本文于2008-01-16书写）
今天在我们的最大的对手alibaba那应聘了一下.
有点感觉.....恩! 看来他们越来越重视用户体验了.
我来发一下我的答案: 献丑
<html>
<head>
<title>Project</title>
</head>
<style type="text/css">
body{ margin:0px; padding:0px; text-align:center;
}
#body-box { margin:auto; width:970px; position:relative;
}
#left { float:left; width:300px; height:500px; text-align:left;
}
#left-top { width:290px; height:250; margin-bottom:10px; background-color:#000000;
}
#left-bottom { width:290px; height:240px; background-color:#999999;
}
#right { float:left; width:600px; height:500px; background-color:#003399;
}
#float-box { position:absolute; width:0px; height:0px; top:0px; left:0px; background-color:#FF0000;
}
</style>
<script language="javascript">
function DivChange(dObject)
{
var dfloat = document.getElementById("float-box");
dfloat.innerHTML = dObject.innerHTML;
dfloat.style.width = PxToInt(dObject.style.width)*1.25;
dfloat.style.height = PxToInt(dObject.style.height)*1.25;
dfloat.style.top = GetTop(dObject);
dfloat.style.left = GetLeft(dObject);
}
function PxToInt(px)
{
var ponter = 0;
px = px.toString(10);
while(px.length > ponter)
{
var strTemp = px.substr(ponter,1);
if(strTemp == ".")
{
return parseInt(px.substr(0,ponter));
}
ponter++;
}
return parseInt(px);
}
function GetTop(dObject)
{
if(dObject.id =="left-top")
{
return "0px";
}
if(dObject.id == "left-bottom")
{
return PxToInt(document.getElementById("left-top").style.height);
}
if(dObject.id == "right")
{
return "0px";
}
}
function GetLeft(dObject)
{
if(dObject.id == "left-top")
{
return "0px";
}
if(dObject.id == "left-bottom")
{
return "0px";
}
if(dObject.id == "right")
{
return PxToInt(document.getElementById("left-top").style.width)+10;
}
}
</script>
<body>
<div id="body-box">
<div id="left">
<div id="left-top" onclick="DivChange(this)" style="width:290px; height:250;">1</div>
<div id="left-bottom" onclick="DivChange(this)" style="width:290px; height:240px;">2</div>
</div>
<div id="right" onclick="DivChange(this)" style="width:600px; height:500px;">3</div>
<div id="float-box"></div>
</div>
</body>
</html>
