体验css+div 之实现简单浮动层的基本方法

Post by 张美工, 2008-9-22, Views:

　　在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";
}

　　这样就行了，当鼠标点击“点击生成浮动层”的链接时，就会以鼠标当前坐标为左上坐标生成一个300x300的灰底黑边浮动层，浮动层右上角是一个关闭浮动层的链接。浮动层的“some content”部分可以用来显示关于当前item的详情，获取这些详情的最佳方式是通过一次异步通信，以ajax方式从服务器取得数据。