js 实现移入文字功能时出现层，移走时，层隐藏，而且层中是有子元素的

用js实现效果:http://www.17u.cn/flight/flight-book1.aspx?para=0*PEK*CKG*2013-12-24*00%3a00*23%3a59**all*all&key=A4D410CBF0B1A03DC546074744F49AD1&TCAlianceCode=&cztype=   放在机型上面会有层效果。

<!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>
<style>
#lookinfo{ width:500px; border:5px solid #DDD; position:relative; left:100px; top:-15px; display:none;}
#info{ border:1px solid #999; }
#tip{ background:url(http://img1.40017.cn/cn/new_ui/airplane/book/book1_k.0.1.0.png) no-repeat -132px -195px; width:17px; height:8px;
position:absolute; top:-7px; left:10px;}
</style>

</head>

<body>

<p >欢迎大家!<a href="###" onmouseover="DisplayInfo();" onmouseout="CloseInfo();">查看这里的信息</a></p>

<script type="text/javascript">
var flag=0;
function DisplayInfo()
{
var obj=document.getElementById("lookinfo");
if(obj==null)
{
//创建
var div=document.createElement("div");
div.id="lookinfo";
div.innerHTML="<div id='tip'></div>"+
"<div id='info'>"+
"<p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p><p>11111111111111111111111</p></div>";
document.body.appendChild(div);
div.style.display="block";
div.onmouseover=DisplayInfo;
div.onmouseout=CloseInfo;
}
showinfo();
}


function CloseInfo()
{
flag=0;
setTimeout("if(flag==0) hideinfo();", "200");
}

function showinfo()
{
flag=1;
document.getElementById("lookinfo").style.display="block";
}

function hideinfo()
{
document.getElementById("lookinfo").style.display="none";
}


</script>
</body>
</html>

posted @ 2013-12-19 22:06  szchenrong  阅读(258)  评论(0)    收藏  举报