仿电台网站网页版html代码,DIV+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 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);
}
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的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()负责切换到下一个音乐台的歌曲的播放。
对象的方法内部不可以设置自身为超时函数
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
仿电台网站网页版html代码,DIV+CSS实现电台列表设计的示例代码相关推荐
- html自动滚动代码,html+css+javascript实现列表循环滚动示例代码
说明:设置时间定时,在规定的时间内替换前一个节点的内容 1.关键代码:javascript: 复制代码代码如下: var dome=document.getElementById("dome ...
- 仿电台网站网页版html代码,实例展示DIV+CSS实现电台列表
这篇文章主要介绍了p+CSS实现电台列表设计的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 CSS Spite技术:也就是CSS精灵技术,实际上CSS的精灵就是 ...
- c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码
前言 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 效果图 示例代码: 扇形绘制 } .sx1{ position: absolut ...
- HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 前言 没有使用任何框架,只是想用最简单纯js的代码实现下 前台: Javascript+jQuery 后台: php/nodej ...
- html 右上角删除图标,网页制作html+css制作div标签增加右上角删除图标的示例代码...
一.需求描述 在Div标签的右上角显示删除图标 二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...
- html把切片变成div,关联网页自动切片生成Div+Css软件
DivCssData(关联网页自动切片生成Div+Css软件数据库版)是一款只需要导入效果图,拉框线就可以生成标准的兼容性的DIV+CSS,同时集成图片切换.图片滚动.滑动门TAB效果.视频代码.表单 ...
- html5 div居中样式,div css 居中有哪些形式与居中代码
div css 居中有哪些模式与居中代码 在HTML组织中会碰到各种千般居中名目配置,比方内容居中(水准居中).内容垂直居中.组织居中等常见CSS居中需要设置,这里CSS5介绍种种居中实例与居中代码. ...
- html 右上角删除图标,html+css制作div标签增加右上角删除图标的示例代码_CSS
一.需求描述 在Div标签的右上角显示删除图标 二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...
- html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
最新文章
- 一个毕业生对大学爱情和奋斗的思考!
- 图像坐标:我想和世界坐标谈谈(B)
- C和指针之部分理解和编码总结
- 【转】XP/2000无法使用“缩略图查看”、右键无“设置桌面背景”选项问题详解...
- mysql 数据库文件导入和导出、远程上传和下载数据库
- 最短哈密尔顿圈matlab解法_复杂制造过程最优哈密尔顿圈算法的MATLAB仿真与分析.doc...
- VideoLan 0.8.6b test 1
- windows配置本地端口映射到其它电脑
- C++字符串常量总结(包含表达式必须是可修改的左值问题)
- 弗洛伊德本我、自我、超我理论
- Dubbo服务调用过程流程图
- 正则系列之量词(Quantifiers)
- 前台传数据到后台的HelloWorld程序
- 计算机网络 自顶向下方法 原书第7版 Chapter 1 计算机网络与因特网读书笔记
- 身份证号码正则表达式详解
- antv/g6基本使用教程
- 【解决】win10下emqx启动报错Unable to load emulator DLL、node.db_role = EMQX_NODE__DB_ROLE = core
- 如何彻底删除Edge浏览器
- 小游戏2048设计思路超简单
- ❤「和平精英」被python爬虫了?看看你最适合什么配件!❤
热门文章
- Oracle数据库获取uuid函数
- [matlab]空间平面绘制
- Android系统中SD卡各文件夹功能详解
- 如何旋转苯环化学结构
- python 学习汇总41:unicode( tcy)
- ”填坑“ -- springboot 启动报错 “Process finished with exit code 1”
- 用计算机专业一句话表白,初中表白的句子 最美的一句话情话
- 黑色画布上的灿烂小花
- 【U8+】科迈与用友U8合作的远程接入产品相关问题
- 【计算机视觉】方向梯度直方图(Histogram of Oriented Gradient,HOG)