javascript练习：模仿qq2008好友列表效果

今天在写一个列表显示效果的时候，正好看见QQ2008的好友列表显示的效果和正在写的效果有那么几分相似，索性就模仿写了起来
QQ2008好友列表的效果比较简单，主要方法是给ID换className.

先看结构：

<div id=”QQ2008″ >
<dl id=”list_item1″ class=”b” style=”margin-top:0;” onclick=”show(this,1)” onmousemove=”over(1)” onmouseout=”out(1)” >
<dt class=”pic”><img src=”images/1.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>Koma</dd>
<dd class=”text”>(今天天气真好！)</dd>
<dd class=”other”><img src=”images/MailButton.gif” /></dd>
</dl>

<dl id=”list_item2″ class=”b” onclick=”show(this,2)” onmousemove=”over(2)” onmouseout=”out(2)” >
<dt class=”pic”><img src=”images/2.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>Anna</dd>
<dd class=”text”>(过完年上班，新的开始！！)</dd>
<dd class=”other”><img src=”images/MailButton.gif” /></dd>
</dl>

<dl id=”list_item3″ class=”b” onclick=”show(this,3)” onmousemove=”over(3)” onmouseout=”out(3)” >
<dt class=”pic”><img src=”images/3.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>风的样子</dd>
<dd class=”text”>(头痛)</dd>
<dd class=”other”></dd>
</dl>
<dl id=”list_item4″ class=”b” onclick=”show(this,4)” onmousemove=”over(4)” onmouseout=”out(4)” >
<dt class=”pic”><img src=”images/4.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>小鱼儿</dd>
<dd class=”text”>(山重水复疑无路，柳暗花明又一村。)</dd>
<dd class=”other”><img src=”images/MailButton.gif” /><img src=”images/mbi_031.gif” /></dd>
</dl>

<dl id=”list_item5″ class=”b” onclick=”show(this,5)” onmousemove=”over(5)” onmouseout=”out(5)” >
<dt class=”pic”><img src=”images/5.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>nick</dd>
<dd class=”text”>(再牛b的肖邦，也弹不出老子的悲伤)</dd>
<dd class=”other”><img src=”images/MailButton.gif” /></dd>
</dl>
</div>

样式表主要分作两部分，一部分是正常显示下的样式，一部分是鼠标点击后的样式。

<style>
*{
margin:0;
padding:0;
}
#QQ2008  {
width:220px;
margin:0 auto;
margin-top:50px;
border:1px solid #B3D7F1;
}
#QQ2008 dl {
margin-top:4px;
}
#QQ2008 .b {
height:24px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
}
#QQ2008 .b .pic {
float:left;
height:24px;
text-align:center;
}
#QQ2008 .b .pic img {
width:20px;
height:20px;
float:left;
margin:2px;
}
#QQ2008 .b .name {
line-height:30px;
font-size:12px;
margin-left:6px;
color:#333333;
float:left;
}
#QQ2008 .b .text {
font-size:12px;
line-height:30px;
color:#666666;
text-overflow : ellipsis;
overflow:hidden;
white-space: nowrap;
}
#QQ2008 .b .other {
display:none;
}
#QQ2008 .show {
height:50px;
background-color:#DDF4FF;
border:1px solid #B3D7F1;
}
#QQ2008 .show .name {
font-size:12px;
line-height:16px;
color:#ff6600;
}
#QQ2008 .show .pic {
float:left;
}
#QQ2008 .show .pic img {
float:left;
width:40px;
height:40px;
margin:5px;
margin-left:2px;
}
#QQ2008 .show .text {
font-size:12px;
line-height:14px;
color:#666;
text-overflow : ellipsis;
overflow:hidden;
white-space: nowrap;
}
</style>

js部分也十分简单

<script>
var show_i=1;
function show(a,b) {
if (show_i==b)  {a.className=(a.className==”show”)?”b”:”show”; return true;}
var ohidden=document.getElementById(”list_item”+show_i);
ohidden.className=”b”;
ohidden.style.border=”1px solid #FFFFFF”;
ohidden.style.backgroundColor=”#fff”;
a.className=(a.className==”show”)?”b”:”show”;
show_i=b;

}
function over(d) {
var now_show=document.getElementById(”list_item”+d);
if (now_show.className==”show”) return true;
now_show.style.border=”1px solid #DDF4FF”;
now_show.style.backgroundColor=”#E8F9FF”;
}

function out(e) {
var now_show=document.getElementById(”list_item”+e);
if (now_show.className==”show”) return true;
now_show.style.border=”1px solid #FFFFFF”;
now_show.style.backgroundColor=”#fff”;
}
</script>

效果看这里: qq2008list_demo