如何实现层特效 我想做一个论坛.我也想仿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><!--居中的浮动提示层结束--><!---------------------------------javascript代码开始--------------------------------------------------><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><!---------------------------------javascript代码结束--------------------------------------------------></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层设置好层的位置设计个好看的图片做背景 自助建站 linkbutton oncommand事件和Postbackurl执行的顺序? js或者jquery怎么提取一段字符中的网址? 技术难题,高手请进,【AjaxPro2】 和 【RecordSet】 的问题,高分寻求解决方案!! 存储过程形成报表问题 int类型可以表达格价吗? 各位朋友,请问开发网站有什么好的技巧和方法 关于oledb读出数据列的架构信息中的AllowDBNull值永远为true的问题 有谁能做到这样的下拉菜单 关于asp.net中form的问题 DataGrid绑定输出后标题ID如何传值 reaper控件嵌套checkboxlist控件数据绑定问题
<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>
<!--居中的浮动提示层结束-->
<!---------------------------------javascript代码开始-------------------------------------------------->
<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>
<!---------------------------------javascript代码结束-------------------------------------------------->
</body>
</html>
style="width:100px;height:100px;border:1px solid #888"
</div>
用到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动态获取就行了。
设置好层的位置
设计个好看的图片做背景