DIV浮动效果

在web2.0之前，还不知道什么是ajax，也不喜欢div+css的布局方式，那时候网页布局就是一个个的大大小小的table嵌套起来，只要对属性设置合理，页面样式就中规中矩稳如泰山。不过这种布局对窗口尺寸的适应能力极弱，所以不得不每次考虑这次的网站做成1003还是780，而信息的呈现方式也极其死板，比如说在一个类似于list的信息汇总页面，如果用户想了解某一个item的详情，一般必须点击进入，造成一次页面刷新和等待。而现在的流行做法改变了，ajax使用户体验得到极大改善，现在面临上述的类似情形，完全可以采用另一种更加灵活的方式：生成呈现item详细内容甚至相关表单的浮动层，就像那个在《长尾理论》和《Foundations of Ajax》这两本亚马逊榜首图书中同时提到的著名网站Netflix一样，当用户把鼠标移到一个DVD海报图片上，带箭头的漂亮浮动层就在封面旁边生成了。最近我也试着看了看这种效果的基本实现方法，在这里做个笔记：
 
首先，这个浮动层其实是一个没有内容的div，为了控制div浮动的位置，需要将其style的position设置成absolute，为了使这个层浮动在页面其他元素之上，需要设置z-index为一个比较大的值，浮动层一开始应该是不可见的，即：<div id="popup" style="position:absolute; z-index:100; display:none; background-color:#eeeeee"></div>
 
好了，可见浮动层事先就在这里，只不过用户看不见。而当事件（比如说鼠标移到DVD海报图片上）被捕捉时，程序就会控制这个浮动层在合适的位置出现了。为此，先应该有一个类似于“DVD海报封面”的东西，比如这可以是一个链接：<a onclick="javascript:generateFloatLayer()">点击生成浮动层</a>，点击后执行下面的函数：
 
function generateFloatLayer(){
 floatArea=document.getElementById("popup");
 floatArea.style.display="none";
 divClose='<div id="close" style="position:absolute; right:10px; top:10px; left:auto; bottom:auto;"><a href="javascript:closeFloat();">X</a></div><br>';
 x=event.clientX + document.body.scrollLeft;
 y=event.clientY + document.body.scrollTop;
 floatArea.innerHTML=divClose+"<div id=\"floatcontent\">some content</div>";
 floatArea.style.border="black 1px solid";
 floatArea.style.left=(document.documentElement.scrollLeft+x-15)+"px";
 floatArea.style.top=(document.documentElement.scrollTop+y-50)+"px";
 floatArea.style.width="300px";
 floatArea.style.height="300px";
 floatArea.style.display="";
}

function closeFloat(){
 floatArea=document.getElementById("popup");
 floatArea.innerHTML="";
 floatArea.style.display="none";
}