我想做的效果是:
类似CSDN论坛左侧鼠标移到每个用户头像上都会显示层,然后层中的内容能够通过AJAX (LOADING....载入数据)
我找了段代码,如果是单个的话,显示隐藏层是正确的,但是把它放在循环语句里就显示不出来了,要把
---------------------------------------------------------------------------------------------------
<a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性(详解)</a><div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
----------------------------------------------------------------------------------------------------这个放到循环语句里,让他逐个显示正常应该怎么改呢?
--------------以下是完整代码----------------------------------------------------
<!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>无标题文档</title>
</HEAD>
<script>
function over(obj,div,bol){
var rec=getoffset(obj);
div.style.top=rec[0]+obj.offsetHeight;
if(bol==true)
rec[1] -= 50;
div.style.left=rec[1];
div.style.display="block";
}
function out(div) {
div.style.display="none";
}function getoffset(e) {
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
var rec = new Array(1);
rec[0] = t;
rec[1] = l;
return rec
} </script>
<BODY>
<table>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">11111</td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">222222</td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性(详解)</a></span></td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">333333</td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">444444</td>
</tr>
<tr>
<div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
</tr>
</table>
</BODY>
类似CSDN论坛左侧鼠标移到每个用户头像上都会显示层,然后层中的内容能够通过AJAX (LOADING....载入数据)
我找了段代码,如果是单个的话,显示隐藏层是正确的,但是把它放在循环语句里就显示不出来了,要把
---------------------------------------------------------------------------------------------------
<a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性(详解)</a><div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
----------------------------------------------------------------------------------------------------这个放到循环语句里,让他逐个显示正常应该怎么改呢?
--------------以下是完整代码----------------------------------------------------
<!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>无标题文档</title>
</HEAD>
<script>
function over(obj,div,bol){
var rec=getoffset(obj);
div.style.top=rec[0]+obj.offsetHeight;
if(bol==true)
rec[1] -= 50;
div.style.left=rec[1];
div.style.display="block";
}
function out(div) {
div.style.display="none";
}function getoffset(e) {
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
var rec = new Array(1);
rec[0] = t;
rec[1] = l;
return rec
} </script>
<BODY>
<table>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">11111</td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">222222</td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性(详解)</a></span></td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">333333</td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">444444</td>
</tr>
<tr>
<div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
</tr>
</table>
</BODY>
解决方案 »
- 大家帮忙修改下3D相册的代码
- 请问能否用js来控制一个marquee的属性
- javascript 控制两个表格的问题,
- 怎么通过js获得easyui下一个treegrid的数据源
- firefox 中异常处理的问题。(第一次发帖,谢谢各位了)
- 请各位帮忙,我是新手,关于TextBox的问题!
- 如何实现在页面不刷新的情况下页面跳到底部(一屏显示不完) 在线等,急啊!!!
- 关于菜单特效的一些问题&ASP基本问题(来者有分,很基本的问题)
- 如何实现光标离开某一个输入框式判断是否是数字?
- 急!在网页中浮动的静止层如何实现相对于浏览器窗口的位置不变?
- 怎么让这JS有效果啊?看看这个搜索框为什么没有下拉搜索提示栏..
- Ext初学者遇到的问题-Ext高手帮帮忙
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.td0{
margin-left:100px;
}
</style>
</HEAD><BODY>
<!--copy it-->
<p><a class="xlink" href="javascript:void(0)">11111111111123213</a></p>
<div class="td0" class="STYLE4" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
<!--one copy end--><p><a class="xlink" href="javascript:void(0)">23213</a></p>
<div class="td0" class="STYLE4" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
<p><a class="xlink" href="javascript:void(0)">健康教育的重要性(详解)</a></p>
<div class="td0" class="STYLE4" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div><script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$(".xlink").mouseover(function(){
$(".td0").css("display","none");
$(this).parent().next(".td0").css("display","block");});$(".td0").mouseout(function(){$(".td0").css("display","none");});})
</script>
</BODY>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</HEAD>
<script>
function over(obj,div,bol){
var rec=getoffset(obj);
div.style.top=rec[0]+obj.offsetHeight;
if(bol==true)
rec[1] -= 50;
div.style.left=rec[1]+30; //加了一个偏移,这样便于切换显示。若不需要,可以去掉。
div.style.display="block";
}
function out(div) {
div.style.display="none";
}function getoffset(e) {
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
var rec = new Array(1);
rec[0] = t;
rec[1] = l;
return rec
} </script>
<BODY>
<table>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康的重要性(详解)</a></span></td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td1)" onmouseout="timer=setTimeout('out(td1)',0)">教育的重要性(详解)</a></span></td>
</tr>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1"><span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td2)" onmouseout="timer=setTimeout('out(td2)',0)">健康教育的重要性(详解)</a></span></td>
</tr>
<tr>
<div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、身体是革命的本钱;<br/>
2、身体是性福的本钱;<br/>
</div>
<div id="td1" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、不学不知;<br/>
2、不学无术;<br/>
</div>
<div id="td2" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
</tr>
</table>
</BODY>
上面的是按你原来的代码改的。
在后台通过循环输出这些,也毫无问题啊。包括后面的DIV部分的ID和DIV里内容。
有什么问题,说得具体清楚些,不易说明的就举实例,不要光用感性的行不行。
<p><a class="xlink" href="javascript:void(0)">健康教育的重要性(详解)</a></p>
<div class="td0" class="STYLE4" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险;<br/>
2、教育能够加强糖尿病并发症的预防和早期发现;<br/>
3、教育能够最大程度的提高患者的依从性,否则如果患者不能够遵守治疗的各个环节,您将很难评价您推荐的治疗方案是否有效。</div>
你是什么岗位?如果你只是前台,这个也需要后台配合的。你这种情况,只需要把鼠标移动过去时获得的对象的ID通过AJAX传给后台程序,后台程序根据它返回相应的信息即可,前台接收到设置DIV。我这样一说,如果你稍懂AJAX,几乎代码都出来了。不过,我不建议你滥用AJAX,你这种情况好像就是滥用。因为项目没几个,完全可以象上面我给的代码那样一次性写入页面进行显示切换。而且每次移动过去都要去取,也没效率。当然,也可以事先判断一下是否AJAX已经返回这个内容,不过,相对这个情形来说,还是没什么必要。