javascript布局之音乐播器

通过自学前端，总结了一些学习经验与demo练习。关于前端的学习，前期的css，div部分的话相对较易， 而js的话，内容相对较深。但是并不代表，它就会很难搞懂。多看一些视频资料，博客，多做一些小练习。 也是很简单的。下面的demo练习， 希望可以给学习的朋友们练习一下。下载包地址：test下载

html:

<div id="drop" class="down-list">
<h2 class="down">播放列表</h2>
<ul style="display: none">
<li><a href="">玩爱之徒－蔡依林</a></li>
<li><a href="">原谅我就是这样的女生－戴佩妮</a></li>
<li><a href="">猜不透－丁当</a></li>
<li><a href="">自导自演－周杰伦</a></li>
<li><a href="">浪漫窝－弦子</a></li>
<li><a href="">流年－王菲</a></li>
</ul>
</div>

CSS:

<style>
*{ padding: 0; margin: 0;}
li { list-style: none; }
body { background: #ffffff; }
.down-list{border: 1px solid #aab4bc;margin: 50px auto 0;width: 250px;background: url("img/down_list_h2_bg.gif")repeat-x;}
.down-list h2{height: 25px;line-height: 25px;border-top: 1px solid #f3f5f7;border-bottom: 1px solid #f3f5f7;font-size: 14px;color: #57646e;cursor: pointer;padding-left: 10px;}
.down{background: url("img/down.gif")no-repeat 230px center;}
.up{background: url("img/up.gif")no-repeat 230px center;font-size: 12px;}
.down-list ul{background: #e9edf2;width: 250px;overflow: hidden;}
.down-list li{width: 250px; float: left;}
.down-list a{display: block;padding-left: 10px;height: 25px;line-height: 25px;text-decoration: none;color: #6b7980;}
.down-list a:hover{background: #fff;text-decoration: underline;}
</style>

script:

<script>
window.onload=function (){
var oDro=document.getElementById('drop');
var oUl=oDro.getElementsByTagName('ul')[0];
var oH2=oDro.getElementsByTagName('h2')[0];

oH2.onclick=showHide;
}

function showHide (){
var oDro=document.getElementById('drop');
var oUl=oDro.getElementsByTagName('ul')[0];
var oH2=oDro.getElementsByTagName('h2')[0];

if (oUl.style.display==='none')
{
oUl.style.display="block";
oH2.className='up';
}
else
{
oUl.style.display='none';
oH2.className='down';
}
}

</script>