优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

DIV和CSS实现电台列表设计

时间:2017-09-01 10:48:30 编辑: 来源:转载

对于使用DIV和CSS的设计也是比较有意思的设计效果,这次文章就给大家简单的先容下DIV和CSS实现电台列表设计,怎么实现效果,实现DIV和CSS实现电台列表设计效果的代码是什么?下面一起来看看。

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

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




    
    酷狗电台列表设计
    
    <script>
        function mouseoverhandle(obj){
            obj.className += ' choose';
        }
        function mouseouthandle(obj){
            obj.className = obj.className.substring(0,2);
        }
    </script>


  • 酷狗热歌 徐朗 - 小夜曲
  • DJ热碟 曾春年 - 最幸福的人
  • 网络红歌 徐志强 - 想你的时候
  • 新歌 孙俪 - 美丽信号
  • 经典 游鸿明 - 寻你
  • 怀旧粤语 陈慧娴 - 人生何处不相逢
  • 钢琴 July - My Soul
  • KTV必点 蔡健雅 - 无底洞
  • 思念 张杰 - 这就是爱
  • DJ外文舞曲 Jean Cloud Ades
<script> var ul = document.getElementById('frm'); var li = document.getElementsByTagName('li'); var spans; for(var i=0;iXML 地图 | Sitemap 地图

生成效果:

DIV和CSS实现电台列表设计

代码分析:

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()负责切换到下一个音乐台的歌曲的播放。

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

文章评论

热门栏目

XML 地图 | Sitemap 地图