DIV+CSS实现电台列表设计的示例代码
发布时间：2017-08-30 16:19:32 作者：耳火耳火 
我要评论
我要评论这篇文章主要介绍了DIV+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 div{
margin:5px 0 5px 0;
}
.d div{
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 div{
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)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>酷狗热歌</div>
<span href="#">徐朗 - 小夜曲</span>
</div>
</li>
<li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>DJ热碟</div>
<span href="#">曾春年 - 最幸福的人</span>
</div>
</li>
<li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>网络红歌</div>
<span href="#">徐志强 - 想你的时候</span>
</div>
</li>
<li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>新歌</div>
<span href="#">孙俪 - 美丽信号</span>
</div>
</li>
<li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>经典</div>
<span href="#">游鸿明 - 寻你</span>
</div>
</li>
<li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>怀旧粤语</div>
<span href="#">陈慧娴 - 人生何处不相逢</span>
</div>
</li>
<li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>钢琴</div>
<span href="#">July - My Soul</span>
</div>
</li>
<li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>KTV必点</div>
<span href="#">蔡健雅 - 无底洞</span>
</div>
</li>
<li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>思念</div>
<span href="#">张杰 - 这就是爱</span>
</div>
</li>
<li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>DJ外文舞曲</div>
<span href="#">Jean Cloud Ades</span>
</div>
</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>
生成效果：
代码分析：
1.ul标签内部含有10个li标签，因为每个li标签的图标为不同的子图片，所以给每个li标签里添加不同的class属性。
2.每个li标签的class属性为d的div标签里面包含了3个div标签，它们的class属性为img、mask和play，这三个标签依次为主题图标、遮罩图标和播放图标，而他们的父节点div(class属性为d)以背景图片作为边框。
3.每个li标签都添加了onmouseover以及onmouseout事件响应函。
4.最后面一段js代码是模拟音乐盒歌曲切换时的歌曲名上升的效果。
首先程序获取id为frm的标签，并获取该标签的所有li子标签，同时获取所有li的span标签，并绑定第一个span标签到li标签对象的span_obj上。
两个超时函数：shownext()以及showup()，其中showup()函数负责产生歌名升起效果，而函数shownext()负责切换到下一个音乐台的歌曲的播放。
对象的方法内部不可以设置自身为超时函数
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文介绍了div 图片如何在DIV内水平居中，无论文字居中、图片居中等内容居中我们都可以使用以上两种方法实现，一般推荐使用CSS进行，但网页多时候，我们只需要修改CSS文件2021-11-30
DIV半透明实现，使用CSS实现DIV成半透明效果，CSS实现层与背景半透明效果。本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2021-11-30
新手在使用web标准（div css）开发网页的时候，遇到第一个问题是div与span有什么区别，什么时候用div，什么时候用span标签。下面小编就通过本文给大家讲解下，感兴趣的朋友2021-11-30
这篇文章主要介绍了设置div背景透明的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-02-20
这篇文章主要介绍了CSS实现div不设高度完全居中，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-02-04
这篇文章主要介绍了div自适应高度自动填充剩余高度,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-07-08- 这篇文章主要介绍了DIV+CSS的命名规矩才能有利于SEO优化的实现方法,需要的朋友可以参考下2018-11-15
- 这篇文章主要介绍了DIV或者DIV里面的图片水平与垂直居中的方法,需要的朋友可以参考下2018-11-15
这篇文章主要介绍了详解如何用div实现自制滚动条,滚动条是浏览器中最常见的组件了。想要学习如何自制滚动条的方法，需要了解的朋友可以参考下2018-03-21- Div布局是学习的重点，这篇文章主要为大家详细介绍了div对齐与网页布局的相关学习资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-31
最新评论