鼠标移动到图片或文字上,弹出一层。像QQ空间的效果那样? 鼠标移动到图片或文字上,弹出一层。像QQ空间的效果那样,把鼠标放到个人图像上弹出的详细信息。 鼠标能够移动到层上,并且弹出的层可以任意设置样式,最好能发一个源码给我。请多多帮忙! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 Google搜一下 html悬浮层<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>学生信息系统</title> <script language="javascript"> var showInfo = new function () { this.showLayer = function (e, id) { var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY]; with (document.getElementById(id + "").style) { display = "block"; left = p[0] + 10 + "px"; top = p[1] + 10 + "px"; } if (window.event) { window.event.cancelBubble = true; } else { if (e) { e.preventDefault(); } } }; this.hideLayer = function (e, id) { with (document.getElementById(id + "").style) { display = "none"; } if (window.event) { window.event.cancelBubble = true; } else { if (e) { e.preventDefault(); } } }; }; </script> <style type="text/css"> .helplay { z-index: 3; position: absolute; border: 1px solid #FFC30E; padding: 5px; background-color: #FFFBB8; text-align: left; color: #9C7600; width: 130px; font-size: 15px; font-family: arial, sans-serif; } </style> </head> <body> <table width="760" border="0" align="center"> <tr> <td width="20%" height="46"></td> <td width="60%" align="center"> 学生信息系统 </td> <td width="20%"></td> </tr> <tr> <td width="20%" height="272" align="center"></td> <td align="center"> <table> <tr> <div style="display: none" id="C1320" class="helplay"> 学号:222222<br> 年龄:18<br> 班级:2<br> 专业:软开<br> 学院:软件学院 </div> </tr> <tr> <td bgcolor="#ffffaa" rowspan=2>姓名 </td> <td colspan="2" bgcolor="#ffffaa"> <div id="C13" href="#" onmouseover="return showInfo.showLayer(event,'C1320');" onmouseout="return showInfo.hideLayer(event,'C1320');"> <b>张三</b> </div> </td> <td bgcolor="#ffffaa" rowspan=2> 待定 </td> </tr> <tr> <div style="display: none" id="C1220" class="helplay"> 学号:1111<br> 年龄:28<br> 班级:1<br> 专业:软开<br> 学院:软件学院 </div> </tr> <tr> <td bgcolor="#ffffaa" rowspan=2>姓名 </td> <td colspan="2" bgcolor="#ffffaa"> <div id="C12" href="#" onmouseover="return showInfo.showLayer(event,'C1220');" onmouseout="return showInfo.hideLayer(event,'C1220');"> <b>李四</b> </div> </td> <td bgcolor="#ffffaa" rowspan=2> 待定 </td> </tr> </table> </td> <td width="20%" align="center"></td> </tr> </table> </body> </html> 楼上的这种效果 , 我鼠标不能放到弹出的那个层上 , 你打开QQ空间,下面这个是我的QQ空间,,把鼠标放到那个图个人图片上弹的出那效果。http://user.qzone.qq.com/409308658?ADUIN=229866246&ADSESSION=1281320391&ADTAG=CLIENT.QQ.3007_FriendTip.0&ptlang=2052 谁有这种效果的代码 <html> <head> </head> <style type="text/css"> .helplay { z-index: 3; position: absolute; border: 1px solid #FFC30E; padding: 5px; background-color: #FFFBB8; text-align: left; color: #9C7600; width: 330px; height: 180px;font-size: 15px; font-family: arial, sans-serif; } </style> <script type="text/javascript">function showSub(){ document.getElementById("hid").style.display="";}function hidSub(){ document.getElementById("hid").style.display="none";}</script> <body> <a href="javascript:void(0)" onmouseover="javascript:showSub();" onmouseout="javascript:hidSub();">鼠标移上来</a> <br /> <div onmouseover="javascript:showSub();" onmouseout="javascript:hidSub();" id="hid" style="display:none;" class="helplay"> <a href="http://www.google.com.hk">google</a> <a href="http://www.baidu.com">baidu</a> <a href="http://bbs.csdn.net/">csdn</a> </div> </body></html> 跟CSDN里面一样,把鼠标放到头像上就弹出一个层,在网上搜一下 不一样的, CSDN里面弹出的框只是显示在图片的右边, 我要的效果是根据底下的图片位置不同而弹出的框框位置也不一样。弹出框的位置可以在图片的上方,下方,左边和右边。。 在网上找了一直没有像QQ空间的那种效果 xiayuqijava 他那第二段代码差不多就能实现你的功能了,只是弹出位置是固定的,你自己想想办法解决呀。 自己动手这样的问题应该不难解决,不光动脑,多动手调式吧!<html> <head> <meta charset="utf-8"/> </head> <style type="text/css"> .helplay { z-index: 3; position: absolute; border: 1px solid #FFC30E; padding: 5px; background-color: #FFFBB8; text-align: left; color: #9C7600; width: 330px; height: 180px;font-size: 15px; font-family: arial, sans-serif; } </style> <script type="text/javascript">var t=0;function showSub(event){clearTimeout(t);var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY]; with (document.getElementById("hid").style) { display = "block"; left = p[0] + 5 + "px"; top = p[1] + 5 + "px"; } }function hidSub(event){t=setTimeout(function(){ document.getElementById("hid").style.display="none"; },100);}</script> <body> <a href="javascript:void(0)" onmouseover="showSub(event);" onmouseout="hidSub(event);">鼠标移上来</a> <br /> <div onmouseover="showSub();" onmouseout="hidSub();" id="hid" style="display:none;" class="helplay"> <a href=" http://www.google.com.hk">google</a> <a href=" http://www.baidu.com">baidu</a> <a href=" http://bbs.csdn.net/">csdn</a> </div> </body></html> <html> <head> <meta charset="utf-8"/> </head> <style type="text/css"> .helplay { z-index: 3; position: absolute; border: 1px solid #FFC30E; padding: 5px; background-color: #FFFBB8; text-align: left; color: #9C7600; width: 330px; height: 180px;font-size: 15px; font-family: arial, sans-serif; } </style> <script type="text/javascript">var t=0;function showSub(event){clearTimeout(t);var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY]; with (document.getElementById("hid").style) { display = "block"; left = p[0] + 5 + "px"; top = p[1] + 5 + "px"; } }function hidSub(event){t=setTimeout(function(){ document.getElementById("hid").style.display="none"; },100);}</script> <body> <div style="height:1000PX;"></div> <div style=" width:100% ; text-align:right;"> <a href="javascript:void(0)" onmouseover="showSub(event);" onmouseout="hidSub(event);">鼠标移上来</a></div> <br /> <div onmouseover="showSub();" onmouseout="hidSub();" id="hid" style="display:none;" class="helplay"> <a href=" http://www.google.com.hk">google</a> <a href=" http://www.baidu.com">baidu</a> <a href=" http://bbs.csdn.net/">csdn</a> </div> </body></html> 你改的这个我再加了两个DIV 让那个内容显示在右下角, 弹出的框位置就不对了。。 还有办法解决没, 我现在网站上正须要这种效果, 我是搞.net 的, 不懂js , 多指教指教啊 function showSub(event){clearTimeout(t);var x = event.clientX + document.body.scrollLeft;var y = event.clientY + document.body.scrollTop;var p = window.event ? [x, y] : [e.pageX, e.pageY]; with (document.getElementById("hid").style) { display = "block"; left = p[0] + 5 + "px"; top = p[1] + 5 + "px"; } }多搜搜 关于SSH程序的一些简单疑问 请教》开发网站!! 数据库连接池的问题,请高手解答~ struts 上传文件问题 在线高分:求一方法,做一个类似于http://www.1rest.com这样的网页结构 java不能连接,看看问题出在那里? 请问现在线程用什么方法停止? stop()方法是不是过期了(虽然能用)? 后台获取不到file jsp中调用javaBean的路径问题 空指针异常 JS幻灯在IE浏览器载入时左上角有个小图 如何去掉 谁能帮我看看我的为什么总是报这个错,,我找了很久。可始终没有找出是什么问题。。拜托了。。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>学生信息系统</title>
<script language="javascript"> var showInfo = new function () {
this.showLayer = function (e, id) {
var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY];
with (document.getElementById(id + "").style) {
display = "block";
left = p[0] + 10 + "px";
top = p[1] + 10 + "px";
}
if (window.event) {
window.event.cancelBubble = true;
} else {
if (e) {
e.preventDefault();
}
}
};
this.hideLayer = function (e, id) {
with (document.getElementById(id + "").style) {
display = "none";
}
if (window.event) {
window.event.cancelBubble = true;
} else {
if (e) {
e.preventDefault();
}
}
};
}; </script>
<style type="text/css">
.helplay {
z-index: 3;
position: absolute;
border: 1px solid #FFC30E;
padding: 5px;
background-color: #FFFBB8;
text-align: left;
color: #9C7600;
width: 130px;
font-size: 15px;
font-family: arial, sans-serif;
}
</style>
</head>
<body>
<table width="760" border="0" align="center">
<tr>
<td width="20%" height="46"></td>
<td width="60%" align="center">
学生信息系统
</td>
<td width="20%"></td>
</tr>
<tr>
<td width="20%" height="272" align="center"></td>
<td align="center">
<table>
<tr>
<div style="display: none" id="C1320" class="helplay">
学号:222222<br>
年龄:18<br>
班级:2<br>
专业:软开<br>
学院:软件学院
</div>
</tr>
<tr>
<td bgcolor="#ffffaa" rowspan=2>姓名
</td>
<td colspan="2" bgcolor="#ffffaa">
<div id="C13" href="#"
onmouseover="return showInfo.showLayer(event,'C1320');"
onmouseout="return showInfo.hideLayer(event,'C1320');">
<b>张三</b>
</div>
</td>
<td bgcolor="#ffffaa" rowspan=2>
待定
</td>
</tr>
<tr>
<div style="display: none" id="C1220" class="helplay">
学号:1111<br>
年龄:28<br>
班级:1<br>
专业:软开<br>
学院:软件学院
</div>
</tr>
<tr>
<td bgcolor="#ffffaa" rowspan=2>姓名
</td>
<td colspan="2" bgcolor="#ffffaa">
<div id="C12" href="#"
onmouseover="return showInfo.showLayer(event,'C1220');"
onmouseout="return showInfo.hideLayer(event,'C1220');">
<b>李四</b>
</div>
</td>
<td bgcolor="#ffffaa" rowspan=2>
待定
</td>
</tr> </table>
</td>
<td width="20%" align="center"></td>
</tr>
</table>
</body>
</html>
<head>
</head>
<style type="text/css">
.helplay {
z-index: 3;
position: absolute;
border: 1px solid #FFC30E;
padding: 5px;
background-color: #FFFBB8;
text-align: left;
color: #9C7600;
width: 330px;
height: 180px;
font-size: 15px;
font-family: arial, sans-serif;
}
</style>
<script type="text/javascript">
function showSub()
{
document.getElementById("hid").style.display="";
}
function hidSub()
{
document.getElementById("hid").style.display="none";
}
</script>
<body>
<a href="javascript:void(0)" onmouseover="javascript:showSub();" onmouseout="javascript:hidSub();">鼠标移上来</a>
<br />
<div onmouseover="javascript:showSub();" onmouseout="javascript:hidSub();" id="hid" style="display:none;" class="helplay">
<a href="http://www.google.com.hk">google</a>
<a href="http://www.baidu.com">baidu</a>
<a href="http://bbs.csdn.net/">csdn</a>
</div>
</body>
</html>
不一样的, CSDN里面弹出的框只是显示在图片的右边, 我要的效果是根据底下的图片位置不同而弹出的框框位置也不一样。弹出框的位置可以在图片的上方,下方,左边和右边。。
在网上找了一直没有像QQ空间的那种效果
<html>
<head>
<meta charset="utf-8"/>
</head>
<style type="text/css">
.helplay {
z-index: 3;
position: absolute;
border: 1px solid #FFC30E;
padding: 5px;
background-color: #FFFBB8;
text-align: left;
color: #9C7600;
width: 330px;
height: 180px;
font-size: 15px;
font-family: arial, sans-serif;
}
</style>
<script type="text/javascript">
var t=0;
function showSub(event)
{
clearTimeout(t);
var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY];
with (document.getElementById("hid").style) {
display = "block";
left = p[0] + 5 + "px";
top = p[1] + 5 + "px";
}
}
function hidSub(event)
{
t=setTimeout(function(){
document.getElementById("hid").style.display="none";
},100);
}
</script>
<body>
<a href="javascript:void(0)" onmouseover="showSub(event);" onmouseout="hidSub(event);">鼠标移上来</a>
<br />
<div onmouseover="showSub();" onmouseout="hidSub();" id="hid" style="display:none;" class="helplay">
<a href=" http://www.google.com.hk">google</a>
<a href=" http://www.baidu.com">baidu</a>
<a href=" http://bbs.csdn.net/">csdn</a>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<style type="text/css">
.helplay {
z-index: 3;
position: absolute;
border: 1px solid #FFC30E;
padding: 5px;
background-color: #FFFBB8;
text-align: left;
color: #9C7600;
width: 330px;
height: 180px;
font-size: 15px;
font-family: arial, sans-serif;
}
</style>
<script type="text/javascript">
var t=0;
function showSub(event)
{
clearTimeout(t);
var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY];
with (document.getElementById("hid").style) {
display = "block";
left = p[0] + 5 + "px";
top = p[1] + 5 + "px";
}
}
function hidSub(event)
{
t=setTimeout(function(){
document.getElementById("hid").style.display="none";
},100);
}
</script>
<body>
<div style="height:1000PX;"></div>
<div style=" width:100% ; text-align:right;">
<a href="javascript:void(0)" onmouseover="showSub(event);" onmouseout="hidSub(event);">鼠标移上来</a></div>
<br />
<div onmouseover="showSub();" onmouseout="hidSub();" id="hid" style="display:none;" class="helplay">
<a href=" http://www.google.com.hk">google</a>
<a href=" http://www.baidu.com">baidu</a>
<a href=" http://bbs.csdn.net/">csdn</a>
</div>
</body>
</html> 你改的这个我再加了两个DIV 让那个内容显示在右下角, 弹出的框位置就不对了。。
还有办法解决没, 我现在网站上正须要这种效果, 我是搞.net 的, 不懂js , 多指教指教啊
{
clearTimeout(t);
var x = event.clientX + document.body.scrollLeft;var y = event.clientY + document.body.scrollTop;var p = window.event ? [x, y] : [e.pageX, e.pageY];
with (document.getElementById("hid").style) {
display = "block";
left = p[0] + 5 + "px";
top = p[1] + 5 + "px";
}
}多搜搜