js 实用漂亮的图文并排列表效果

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.zzzyk.com/1999/xhtml">
<head>
<title>非常实用漂亮的图文并排列表效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<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;} 
.abg{background:#75C0DD;}
</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].onclick=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"; 
	thisdiv.style.background = 'red';
    thisp.style.display="block"; 
	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'; 
	cur.style.color='cccccc';
    } 
    } 
    } 
} 
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>2010-2-10</code>鼠标滑过列表文字显示</p>
			<div style="display:block;">
				<img  src="/upload/20130914/20100915115300923.jpg" title="图片">
				鼠标滑过列表文字显示图片及详细信息信息信息
				<em>日增：666</em>
			</div>
		</li>
		<li>
			<span>2</span>
			<p><code>2010-2-10</code>鼠标滑过列表文字显示</p>
			<div>
				<img  src="/upload/20130914/20100915115306300.jpg" title="图片">
				鼠标滑过列表文字显示图片及详细信息信息信息
				<em>日增：666</em>
			</div>
		</li>
		<li>
			<span>3</span>
			<p><code>2010-2-10</code>鼠标滑过列表文字显示</p>
			<div>
				<img  src="/upload/20130914/20100915115312590.jpg" title="图片">
				鼠标滑过列表文字显示图片及详细信息信息信息
				<em>日增：666</em>
			</div>
		</li>
	</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

补充：网页特效,页面特效