前端开发

 首页 > 前端开发 > css教程 > DIV+CSS实现电台列表设计的示例代码

DIV+CSS实现电台列表设计的示例代码

分享到：
【字体：大 中 小】
导读：
         [导读] CSS Spite技术：也就是CSS精灵技术，实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术，可有效减少传输请求次数，所...

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

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




    
    酷狗电台列表设计
    
    



    
        
            
            
            
        
                     
酷狗热歌
            徐朗 - 小夜曲                                                                                                  
DJ热碟
            曾春年 - 最幸福的人                                                                                                  
网络红歌
            徐志强 - 想你的时候                                                                                                  
新歌
            孙俪 - 美丽信号                                                                                                  
经典
            游鸿明 - 寻你                                                                                                  
怀旧粤语
            陈慧娴 - 人生何处不相逢                                                                                                  
钢琴
            July - My Soul                                                                                                  
KTV必点
            蔡健雅 - 无底洞                                                                                                  
思念
            张杰 - 这就是爱                                                                                                  
DJ外文舞曲
            Jean Cloud Ades              

生成效果：

代码分析：

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

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


分享到：
CSS中的-webkit-text-size-adjust属性
CSS中的-webkit-text-size-adjust属性详解 在css里发现这么一个属性 -webkit-text-size-adjust ，百度了一下，发现知乎上有位大神的回复很不错，先搬过来参考一下，以后有时间在研究。 -webkit-text-size-adjust 的本职是用于mobile的，见规范 CSS Mobile Text Size Adjustment Module Level 1 和 apple 的 Safari Web Cont...
HTML写一个网页动态时钟
用html写一个动态网页时钟，代码如下所示：                                 时钟特效                         function disptime(){               var today=new Date();               var hh=today.getHours();    ...
  •         php迷，一个php技术的分享社区，专属您自己的技术摘抄本、收藏夹。
  • 在这里……

Tags

网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱  冀ICP备18013926号-2