鼠标滑过列表文字显示图片及详细信息信息信息
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CnNorco2010.WebForm1" %>
<!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; " />
<title>提示框效果</title>
<style type="text/css">
ul,p{ margin:0; padding:0;}
.topcn{width:300px;line-height:27px;font-size:12px;}
.topcn a{font-size:12px;}
.topcn li{border-bottom:#000 1px dotted;display:inline-block;clear:both;}
.topcn span{float:left;width:17px;height:15px;line-height:15px;text-align:center;font-size:9px;font-family: Verdana, Geneva, sans-serif;margin:5px 5px 0 0;background-color:#99C;}
.topcn p,.topcn div {float:left;width:278px;}
.topcn p code {float:right;color:#9f9fa1;}
.topcn img {width:67px;height:50px;border:#000 1px solid;float:left;margin:3px 10px 0 0;display:inline; background-color: #CCF;}
.topcn em {display:block;color:#919b9d;}
.topcn div{line-height:19px; padding-bottom:5px; display:none;}
</style>
<script type="text/javascript">
function ranklist(id,ele,elename,elechild,start_ele,cur_ele){
var obj_id=document.getElementById(id);
var obj_ele=$tag(obj_id,ele);
for(i=0;i<obj_ele.length;i++){
if(obj_ele[i].className.indexOf(elename) == -1) continue;
var objlist=$tag(obj_ele[i],elechild);
for(j=0;j<objlist.length;j++){
objlist[j].onmouseover=function(){
var paris=this.parentNode;
var list=$tag(paris,elechild);
for(x=0;x<list.length;x++){
var thisdiv=$tag(list[x],cur_ele)[0];
var thisp=$tag(list[x],start_ele)[0];
thisdiv.style.display="none";
thisp.style.display="block";
}
var start=$tag(this,start_ele)[0];
start.style.display='none';
var cur=$tag(this,cur_ele)[0];
cur.style.display='block';
}
}
}
}
function $tag(id,tag){return id.getElementsByTagName(tag);}
setTimeout("ranklist('ranklist','ul','topcn','li','p','div')",0);
/*参数解释：
ranklist:为了缩小函数在文档中搜寻对象的范围，给其设置了一个id参数；
ul：在搜寻范围内遍历ul元素列表；这是ele参数，为了排除与效果无关的ul元素；给其添加了类topcn，这是elename参数；
在指定的ul中遍历li列表元素；鼠标经过li元素会有相应的事件产生；
p:为文字列表行；
div：是显示的详细信息区域；
*/
</script>
</head>
<body >
<div id="ranklist">
<ul class="topcn">
<li>
<span>1</span>
<p style="display:none;"><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>
<div style="display:block;">
<a href="#"><img src="images/imgs.jpg" title="图片"/></a>
<a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>
<em>日增：666</em>
</div>
</li>
<li>
<span>2</span>
<p><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>
<div>
<a href="#"><img src="images/imgs.jpg" title="图片"/></a>
<a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>
<em>日增：666</em>
</div>
</li>
<li>
<span>3</span>
<p><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>
<div>
<a href="#"><img src="images/imgs.jpg" title="图片"/></a>
<a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>
<em>日增：666</em>
</div>
</li>
</ul>
</div>
</body>
</html>
