<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title>酷狗电台列表设计</title>
<style>
#frm{
margin:0;
padding:0;
list-style-type: none;
width: 500px;
border:1px solid #000;
overflow: hidden;
}
#frm *{
margin:0;
padding: 0;
font-size: 12px;
}
#frm li{
padding:4px 0;
width: 47%;
float: left;
margin:5px 15px 5px 0;
cursor: pointer;
}
#frm li span{
color:#999;
position: relative;
}
#frm li .d{
width: 38px;
height: 38px;
float: left;
margin:0px 12px 6px 0;
background-image: url(img/spite2.jpg);
position: relative;
}
#frm li .cont{
position: relative;
height: 37px;
overflow: hidden;
}
.cont p{
margin:5px 0 5px 0;
}
.d p{
position: absolute;
width: 100%;
height: 100%;
}
.d .img,.d .play{
background-image: url(img/spite2.jpg);
}
.l1 .d .img{
background-position: 38px 0;
}
.l2 .d .img{
background-position: 76px 0;
}
.l3 .d .img{
background-position: 114px 0;
}
.l4 .d .img{
background-position: 152px 0;
}
.l5 .d .img{
background-position: 190px 0;
}
.l6 .d .img{
background-position: 228px 0;
}
.l7 .d .img{
background-position: 266px 0;
}
.l8 .d .img{
background-position: 304px 0;
}
.l9 .d .img{
background-position: 342px 0;
}
.ll .d .img{
background-position: 380px 0;
}
.d .mask,.d .play{
visibility: hidden;
}
.choose .d{
background-position: 38px 0;
outline: 1px solid rgb(233,243,250);
}
.choose .d .mask{
background-color: #000;
filter:alpha(Opacity=50);
opacity: 0.5;
height: 32px;
width: 32px;
top:3px;
left: 3px;
visibility: visible;
}
.choose .d .play{
background-position: 418px 0;
visibility: visible;
}
.choose .cont p{
font-weight: bold;
color:rgb(0,155,250);
}
</style>
<script>
function
mouseoverhandle(obj){
obj.className += ' choose';
}
function
mouseouthandle(obj){
obj.className = obj.className.substring(0,2);
}
</script>
</head>
<body>
<ul id=
"frm"
>
<li
class
=
"l1"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>酷狗热歌</p>
<span href=
"#"
>徐朗 - 小夜曲</span>
</p>
</li>
<li
class
=
"l2"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>DJ热碟</p>
<span href=
"#"
>曾春年 - 最幸福的人</span>
</p>
</li>
<li
class
=
"l3"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>网络红歌</p>
<span href=
"#"
>徐志强 - 想你的时候</span>
</p>
</li>
<li
class
=
"l4"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>新歌</p>
<span href=
"#"
>孙俪 - 美丽信号</span>
</p>
</li>
<li
class
=
"l5"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>经典</p>
<span href=
"#"
>游鸿明 - 寻你</span>
</p>
</li>
<li
class
=
"l6"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>怀旧粤语</p>
<span href=
"#"
>陈慧娴 - 人生何处不相逢</span>
</p>
</li>
<li
class
=
"l7"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>钢琴</p>
<span href=
"#"
>July - My Soul</span>
</p>
</li>
<li
class
=
"l8"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>KTV必点</p>
<span href=
"#"
>蔡健雅 - 无底洞</span>
</p>
</li>
<li
class
=
"l9"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>思念</p>
<span href=
"#"
>张杰 - 这就是爱</span>
</p>
</li>
<li
class
=
"ll"
onmouseover=
"mouseoverhandle(this)"
onmouseout=
"mouseouthandle(this)"
>
<p
class
=
"d"
>
<p
class
=
"img"
></p>
<p
class
=
"mask"
></p>
<p
class
=
"play"
></p>
</p>
<p
class
=
"cont"
>
<p>DJ外文舞曲</p>
<span href=
"#"
>Jean Cloud Ades</span>
</p>
</li>
</ul>
<script>
var
ul = document.getElementById('frm');
var
li = document.getElementsByTagName('li');
var
spans;
for
(
var
i=0;i<li.length;i++){
spans = li[i].getElementsByTagName('span');
li[i].span_obj = spans[0];
}
var
index = -1;
function
showup(){
if
(li[index].span_obj.style.top == ''){
li[index].span_obj.style.top = '13px';
}
if
(parseInt(li[index].span_obj.style.top)<=0){
li[index].span_obj.style.top = '';
setTimeout('shownext()',1000);
}
else
{
li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)-1 +'px';
setTimeout('showup()',100);
}
}
function
shownext(){
index++;
index = index%li.length;
showup();
}
setTimeout(shownext,1000);
</script>
</body>
</html>