演示
http://www.fffcn.com/code/56demo.html复制内容到剪贴板
代码:
<!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 type="text/css">
#top10 { text-align:left}
#top10 a{ line-height:27px; color:#0093bb}
#top10 li {border-bottom:1px solid #cccccc; padding-left:15px; line-height:27px;}
#top10 .li1{ height:70px; line-height:16px; overflow:hidden; padding-bottom:3px; margin-top:3px;}
#top10 .li1 div{ border:1px solid #e3debe; background:#fefbf4; padding:2px 0px;}
#top10 .li1 .infos img{ margin:3px; float:left; width:80px; height:55px; padding:1px;border:1px solid #cccccc;}
#top10 .li1 .infos{ height:63px}
#top10 .li1 em{display:none;}
#top10 .li1 span{display:none;}
#top10 .li2 { height:27px;overflow:hidden}
#top10 .li2 em{ float:right; color:#ff7400; font-style:normal; font-size:11px}
#top10 .li2 div{display:none;}
</style>
<script type="text/javascript">
function setit(id) {
var tiao=document.getElementById(id).getElementsByTagName('li');
for(i=0; i<tiao.length; i++) {
if(i == 0){
tiao.className='li1';
}
}
}
function closeit(id) {
var tiao=document.getElementById(id).getElementsByTagName('li');
for(i=0; i<tiao.length; i++) {tiao.className='li2';}
}
</script>
</head>
<body>
<div style="height:; padding:14px 0 9px; text-align:center; width:300px">
<ul style="margin:0 auto; width:85%;padding:0px;" id="top10">
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<li class="li2" onmousemove="closeit('top10'); this.className='li1'">
<div class="infos"><img src="http://uface.56.com/photo/3/93/ccy705833352_56.com_.jpg" alt="" /><dl><dt><a href="#####" title="Gethigh">Gethigh</a></dt>
<dd>Gethigh</dd></dl></div>
<em>28</em><span><a href="http://192.168.0.177/pocle/video.php?vid=87" title="Gethigh">Gethigh</a></span>
</li>
<script type="text/javascript">setit("top10");</script>
</ul>
</div>
</body>
</html>[
本帖最后由 Flash菲 于 2007-9-14 15:13 编辑 ]
我的助手
