实例展示DIV+CSS实现电台列表

来源：懂视网责编：小OO 时间：2020-11-27 15:28:39

实例展示DIV+CSS实现电台列表

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

推荐度：

点击下载本文 文档为doc格式

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

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

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

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

<!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>

生成效果：