如何实现层特效

我想做一个论坛.我也想仿csdn论坛里的.把鼠标放在自己的头像上弹出一个层的效果的.我试一下,我还是做不出来.请大家帮忙呀谢谢!

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

js+div.没有现成的代码。等待ing...
帮你找到一个,嘎嘎~~<!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>javascript测试浮动提示层</title>
<style type="text/css">
*{font-size:12px;}
ul{ list-style-type:none; margin:0px; padding:0px;}
.contentBox{ width:300px; border:1px solid #000000; position:relative; z-index:100001}
.ctTop{ width:300px; height:20px; font-weight:bold; background-color:#009966; font-size:14px; text-align:center; padding-top:8px; cursor:hand;}
.ctMain{ width:260px; height:50px; background-color:#00CC00; padding:10px 0 10px 40px;}
.ctBottom { background-color:#009966; text-align:center; cursor:hand; font-weight:bold; padding-top:2px;}
a:hover { color:#000000;}
#middleBackgroundLayer {background-color:#00CCFF; position:absolute; top:0; left:0; display:none;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
opacity: 0.6;
}
</style>
</head><body>
<div id="floatLayer">
<ul>
  <li><a href="#" target="_blank" onmousemove="showContent(0)" onmouseout="hiddenContent(0)">李白---宣州谢朓楼饯别校书叔云</a></li>
  <li><a href="#" target="_blank" onmousemove="showContent(1)" onmouseout="hiddenContent(1)">杜甫---登楼</a></li>
  <li><a href="#" target="_blank" onmousemove="showContent(2)" onmouseout="hiddenContent(2)">白居易---赋得古原草送别</a></li>
  <li style="color:#00CC00;">以下是居中的浮动层</li>
  <li><a href="#" onclick="showMiddleContent(0)">曹操---度关山</a></li>
  <li><a href="#" onclick="showMiddleContent(1)">白居易---紫藤</a></li>
</ul>
</div><div id="content0" class="contentBox" style="display:none;">
<div class="ctTop">宣州谢朓楼饯别校书叔云</div>
<div class="ctMain">
  弃我去者，昨日之日不可留<br>
  乱我心者，今日之日多烦忧<br>
  长风万里送秋雁①，对此可以酣高楼 <br>
  蓬莱文章②建安骨，中间小谢又清发<br>
  俱怀逸兴壮思飞，欲上青天览日月<br>
  抽刀断水水更流，举杯消愁愁更愁<br>
  人生在世不称意，明朝散发弄扁舟
</div>
</div>
<div id="content1" class="contentBox" style="display:none">
<div class="ctTop">登楼</div>
<div class="ctMain">
  花近高楼伤客心，万方多难此登临<br>
  锦江春色来天地，玉垒浮云变古今<br>
  北极朝廷终不改，西山寇盗莫相侵<br>
  可怜后主还祠庙，日暮聊为《梁父吟》
</div>
</div>
<div id="content2" class="contentBox" style="display:none;">
<div class="ctTop">赋得古原草送别</div>
<div class="ctMain">
  离离原上草<br>
  一岁一枯荣<br>
  野火烧不尽<br>
  春风吹又生<br>
  远芳侵古道<br>
  晴翠接荒城<br>
  又送王孙去<br>
  萋萋满别情
</div>
</div>
<div id="middleBackgroundLayer"></div>
<div id="middleContent0" class="contentBox" style="display:none;">
<div class="ctTop" onmousedown="startDrag(this)" onmouseup="stopDrag(this)" onmousemove="drag(this)">度关山</div>
<div class="ctMain">
天地间，人为贵 <br>
立君牧民，为之轨则<br>
车辙马迹，经纬四极<br>
黜陟幽明，黎庶繁息<br>
於铄贤圣，总统邦域<br>
封建五爵，井田刑狱<br>
有燔丹书，无普赦赎<br>
皋陶甫侯，何有失职<br>
嗟哉后世，改制易律<br>
劳民为君，役赋其力<br>
舜漆食器，畔者十国<br>
不及唐尧，采椽不斫<br>
世叹伯夷，欲以厉俗<br>
侈恶之大，俭为共德<br>
许由推让，岂有讼曲<br>
兼爱尚同，疏者为戚
</div>
<div class="ctBottom" onclick="hiddenMidFloatLayer(0)">关闭</div>
</div><div id="middleContent1" class="contentBox" style="display:none;">
<div class="ctTop" onmousedown="startDrag(this)" onmouseup="stopDrag(this)" onmousemove="drag(this)">紫藤</div>
<div class="ctMain">
  藤花紫蒙茸，藤叶青扶疏<br>
  谁谓好颜色，而为害有馀<br>
  下如蛇屈盘，上若绳萦纡<br>
  可怜中间树，束缚成枯株<br>
  柔蔓不自胜，袅袅挂空虚<br>
  岂知缠树木，千夫力不如<br>
  先柔后为害，有似谀佞徒<br>
  附著君权势，君迷不肯诛<br>
  又如妖妇人，绸缪蛊其夫<br>
  奇邪坏人室，夫惑不能除<br>
  寄言邦与家，所慎在其初<br>
  毫末不早辨，滋蔓信难图<br>
  愿以藤为戒，铭之于座隅
</div>
<div class="ctBottom" onclick="hiddenMidFloatLayer(1)">关闭</div>
</div>


<script type="text/javascript">
//此处为上三首诗的代码
function showContent(i){
showid = "content" + i;
var target = document.getElementById(showid);
target.style.display = "block";
target.style.position = "absolute";
target.style.top = event.clientY + 20;
target.style.left = event.clientX - 20;
}function hiddenContent(i){
hiddenid = "content" + i;
document.getElementById(hiddenid).style.display = "none";
}
//-----------------------------------------------------------------------------------------------------
//此处为下二首诗的代码
function showMiddleContent(i){
var bgl = document.getElementById("middleBackgroundLayer");
bgl.style.display = "block";
bgl.style.width = screen.Width;
bgl.style.height = screen.Height;
bgl.style.backgroundColor = "#999999";

var psX = (screen.Width - 700)/2;
var psY = (screen.Height - 300)/2;
var mdl = "middleContent" + i;
var mdc = document.getElementById(mdl);
mdc.style.display = "block";
mdc.style.position = "relative";
mdc.style.top = psX;
mdc.style.left = psY;
}function hiddenMidFloatLayer(i){
document.getElementById("middleContent" + i).style.display = "none";
document.getElementById("middleBackgroundLayer").style.display = "none";
}
//-----------------------------------------------------------------------------------------------------
//以下为浮层，鼠标托动效果的代码
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){//如果按下左键
obj.setCapture();//锁定本标题层
var win = obj.parentNode; //取得此标题层的父层
x0 = event.clientX;//鼠标横坐标,在此用作标记一个走过的"脚印"
y0 = event.clientY; //鼠标纵坐标
x1 = parseInt(win.offsetLeft); //得到该层位置坐标，并将XXpx转换为xx整数
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + (event.clientX - x0) - 10; //x1为层的left实坐标，event.clientX - x0为要移动的坐标差，此坐标差可为正，也可为负，为什么减10呢???????????
win.style.top = y1 + (event.clientY - y0) - 100;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>

</body>
</html>
很简单，就两个事件<div onmouseover="alert('鼠标移进来显示');" onmouseout="alert('鼠标移出隐藏');">
style="width:100px;height:100px;border:1px solid #888"
</div>
div+css+javascript
用到AJAX技术异步获取数据显示在DIV中并显示出来
<script type="text/javascript">
var w = 0;
var h = 0;
var mout;
function emotion(){
var oMenu = document.getElementById("menu");
if(w <= 50){
oMenu.style.display = "block";
fnLarge();
}
else{
fnSmall();
}
}
function fnLarge(){
var oMenu = document.getElementById("menu");
if(w < 200){
w += 50;
h += 25;
oMenu.style.width = w+"px";
oMenu.style.height = h+"px";
window.setTimeout("fnLarge()",10);
}
}
function fnSmall(){
var oMenu = document.getElementById("menu");
if(w > 0){
w -= 50;
h -= 25;
oMenu.style.width = w+"px";
oMenu.style.height = h+"px";
window.setTimeout("fnSmall()",5);
}
else{
oMenu.style.display = "none";
}
}
</script><style type="text/css">
body{
text-align: center;
}
p{
cursor: pointer;
margin: 0;
padding: 0;
font-size: 24px;
display: inline;
}
div a:link, div a:visited{
color: #666;
text-decoration: none;
}
div a:hover{
color: #FF6600;
text-decoration: underline;
}
div{
border: 2px solid #666;
background: #fff;
margin: 5px auto;
overflow: hidden;
display: none;
padding: 5px 10px;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
li.title{
font-weight: bold;
}
.aaa {
background-color: #00CCCC;
color: #FFFFFF;
line-height: 30px;
padding: 8px;
}
.f{
position:absolute;
top:30px;
left:400px;
}
</style><body>
<p onclick="emotion();">hello, 点这里!</p>
<div id="menu" class="f" onmouseout="javascript:mout=setTimeout('fnSmall()',1000);" onMouseOver="javascript:clearTimeout(mout);">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li></li>
</ul></td>
<td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li></ul></td>
<td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li></ul></td><td width="50" valign="top" align="left"><ul><li class="title">class</li><li><a href="#" onclick="fnSmall();">item</a></li><li><a href="#" onclick="fnSmall();">item</a></li>
</ul></td>
</tr>
</table>
</div><br /><span class="aaa">能让弹出的菜单是压在这个上边，而不是吧这里挤压下去吗？</span></body>
今天刚写了个这个东西，参考了http://bbs.51js.com/viewthread.php?tid=80592，你把table里面的内容用ajax动态获取就行了。
js控制显示和隐藏div层
设置好层的位置
设计个好看的图片做背景