漂亮的图文并排列表特效代码

2011-12-26：：158

：

漂亮的图文并排列表特效代码，修改下文字和图片吧，点击查看列表有拉长，在超源建站软件中特效显示正常。

<!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">  <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:#ccc 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><a href="#">鼠标滑过列表文字显示</a></p> <div style="display:block;"> <a href="#"><img src="http://www.jh101.com/Files/Main/Editor/tx/girl-1.jpg" title="图片"></a> <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a> <em>日增：666</em> </div> </li> <li> <span>2</span> <p><code>2010-2-10</code><a href="#">鼠标滑过列表文字显示</a></p> <div> <a href="#"><img src="http://www.jh101.com/Files/Main/Editor/tx/girl-2.jpg" title="图片"></a> <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a> <em>日增：666</em> </div> </li> <li> <span>3</span> <p><code>2010-2-10</code><a href="#">鼠标滑过列表文字显示</a></p> <div> <a href="#"><img src="http://www.jh101.com/Files/Main/Editor/tx/girl-3.jpg" title="图片"></a> <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a> <em>日增：666</em> </div> </li> </ul> </div> </body> </html><p> <span style="font-size: 14px"><span style="color: #2f4f4f">金华超源网络科技有限公司 </span><a data-cke-saved-href="http://jh101.com/" href="http://jh101.com/" target="_blank"><span style="color: #2f4f4f">http://jh101.com/</span></a></span></p>

软件介绍软件功能视频演示

更多网页特效>>

金华市超源网络科技有限公司是一家建站软件开发、网站建设、企业网络推广为主营业务的互联网技术服务公司。以“敬业负责、恪守信誉、积极进取、勇于创新”的经营理念，立足为广大厂家、商家与市场流通之间通过互联网架起信息沟通的的桥梁.；协助商家实施名牌战略，为商品产、供、销提供经济快捷、准确、丰富的信息服务及电子商务服务。

超源1+1专业建站软件可将所有网站功能进行“版块功能组件化”，建站者只需在网站前台（即网站页面）对功能组件进行简单的拖拽、缩放等操作，即可完全按照建站者的构思，建设出专业的网站来。在建站技术上首次实现了所见即所得。