DIV和CSS怎么实现电台列表设计_DIV和CSS实现电台列表设计代码

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

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

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

nbsp;html>        酷狗电台列表设计            #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);        }                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<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);

生成效果:

p和CSS实现电台列表设计

代码分析:

1.ul标签内部含有10个li标签,因为每个li标签的图标为不同的子图片,所以给每个li标签里添加不同的class属性。

2.每个li标签的class属性为d的p标签里面包含了3个p标签,它们的class属性为img、mask和play,这三个标签依次为主题图标、遮罩图标和播放图标,而他们的父节点p(class属性为d)以背景图片作为边框。

3.每个li标签都添加了onmouseover以及onmouseout事件响应函。

4.最后面一段js代码是模拟音乐盒歌曲切换时的歌曲名上升的效果。

首先程序获取id为frm的标签,并获取该标签的所有li子标签,同时获取所有li的span标签,并绑定第一个span标签到li标签对象的span_obj上。

两个超时函数:shownext()以及showup(),其中showup()函数负责产生歌名升起效果,而函数shownext()负责切换到下一个音乐台的歌曲的播放。

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

相关推荐:

div和css布局的基本知识分享

div和css布局的基本知识分享

div和css布局的基本知识分享

以上就是DIV和CSS怎么实现电台列表设计_DIV和CSS实现电台列表设计代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2897793.html

(0)
上一篇 2025年3月10日 23:28:18
下一篇 2025年3月10日 23:28:31

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论