我认为javascript不可能做到的事情。。

<!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" lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>两个div</title>
</head><body>
<div style="position: absolute; width: 100px; height: 100px; z-index: 3; left:10px; top:50px;border:1px #f00 solid" id="d1" >d1<br><br><span onclick="startMov()" id=inf style="color:red;font-weight:900;CURSOR: pointer">请点击:开始</span>
</div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left:10px; top:200px;border:1px #00f solid" id="d2">d2
</div><script language="javascript">
<!--
var obj1=$("d1"),obj2=$("d2"),T01=obj1.offsetTop,time=1;
var h1=obj1.offsetHeight,h2=obj2.offsetHeight;
function mov(){
var t1=obj1.offsetTop
var t2=obj2.offsetTop
// alert(t1+"\n"+t2) obj1.style.top=t1+1+"px"
if ((t1+h1)==t2){
alert("d1 光临 d2");
obj1.style.borderWidth="2px"
obj2.style.background="#aaf"
}
if ((t1)==t2+h2-2){
alert("d1 告别 d2")
obj1.style.borderWidth="1px"
obj2.style.background=""
}
if ((t1)==t2+h2+50){
alert("再见")
$("inf").innerHTML="请点击:返回"
time=0
}
else {setTimeout(mov,30)}
}
function startMov(){
if (time==1){$("inf").innerHTML="";mov()}
else {obj1.style.top=T01+"px";$("inf").innerHTML="请点击:开始";time=1}
}
function $(id){return document.getElementById(id)}
//-->
</script>
</body></html>