这篇文章主要介绍了p+CSS实现电台列表设计的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

CSS Spite技术：也就是CSS精灵技术，实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术，可有效减少传输请求次数，所需要的图标汇总在一张图片中，一次下载即可整个页面应用

以下示例主要是CSS精灵技术的应用，直接Po代码：

酷狗电台列表设计

#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);

}

function mouseoverhandle(obj){

obj.className += ' choose';

}

function mouseouthandle(obj){

obj.className = obj.className.substring(0,2);

}

• 酷狗热歌

  徐朗 - 小夜曲

• DJ热碟

  曾春年 - 最幸福的人

• 网络红歌

  徐志强 - 想你的时候

• 新歌

  孙俪 - 美丽信号

• 经典

  游鸿明 - 寻你

• 怀旧粤语

  陈慧娴 - 人生何处不相逢

• 钢琴

  July - My Soul

• KTV必点

  蔡健雅 - 无底洞

• 思念

  张杰 - 这就是爱

• DJ外文舞曲

  Jean Cloud Ades

var ul = document.getElementById('frm');

var li = document.getElementsByTagName('li');

var spans;

for(var i=0;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);

生成效果：

代码分析：

1.ul标签内部含有10个li标签，因为每个li标签的图标为不同的子图片，所以给每个li标签里添加不同的class属性。

2.每个li标签的class属性为d的p标签里面包含了3个p标签，它们的class属性为img、mask和play，这三个标签依次为主题图标、遮罩图标和播放图标，而他们的父节点p(class属性为d)以背景图片作为边框。

3.每个li标签都添加了onmouseover以及onmouseout事件响应函。

4.最后面一段js代码是模拟音乐盒歌曲切换时的歌曲名上升的效果。

首先程序获取id为frm的标签，并获取该标签的所有li子标签，同时获取所有li的span标签，并绑定第一个span标签到li标签对象的span_obj上。

两个超时函数：shownext()以及showup()，其中showup()函数负责产生歌名升起效果，而函数shownext()负责切换到下一个音乐台的歌曲的播放。

对象的方法内部不可以设置自身为超时函数