明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

案例展示DIV+CSS完成電臺下文

發(fā)表時間：2024-05-10 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這篇文章主要介紹了p+CSS實現(xiàn)電臺列表設(shè)計的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧CSS Spite技術(shù)：也就是CSS精靈技術(shù)，實際上CSS的精靈就是圖片里的一個個的圖標元素，這些圖標可以使按鈕、標簽以及l(fā)ogo等等。很多網(wǎng)站中都應(yīng)用了該技術(shù)，可有效...
這篇文章主要介紹了p+CSS實現(xiàn)電臺列表設(shè)計的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

CSS Spite技術(shù)：也就是CSS精靈技術(shù)，實際上CSS的精靈就是圖片里的一個個的圖標元素，這些圖標可以使按鈕、標簽以及l(fā)ogo等等。很多網(wǎng)站中都應(yīng)用了該技術(shù)，可有效減少傳輸請求次數(shù)，所需要的圖標匯總在一張圖片中，一次下載即可整個頁面應(yīng)用

以下示例主要是CSS精靈技術(shù)的應(yīng)用，直接Po代碼：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>酷狗電臺列表設(shè)計</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 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);
        }
    </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)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>酷狗熱歌</p>
            <span href="#">徐朗 - 小夜曲</span>
        </p>
    </li>
    <li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>DJ熱碟</p>
            <span href="#">曾春年 - 最幸福的人</span>
        </p>
    </li>
    <li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>網(wǎng)絡(luò)紅歌</p>
            <span href="#">徐志強 - 想你的時候</span>
        </p>
    </li>
    <li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>新歌</p>
            <span href="#">孫儷 - 美麗信號</span>
        </p>
    </li>
    <li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>經(jīng)典</p>
            <span href="#">游鴻明 - 尋你</span>
        </p>
    </li>
    <li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>懷舊粵語</p>
            <span href="#">陳慧嫻 - 人生何處不相逢</span>
        </p>
    </li>
    <li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>鋼琴</p>
            <span href="#">July - My Soul</span>
        </p>
    </li>
    <li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>KTV必點</p>
            <span href="#">蔡健雅 - 無底洞</span>
        </p>
    </li>
    <li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>思念</p>
            <span href="#">張杰 - 這就是愛</span>
        </p>
    </li>
    <li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>DJ外文舞曲</p>
            <span href="#">Jean Cloud Ades</span>
        </p>
    </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>

生成效果：

實例展示DIV+CSS實現(xiàn)電臺列表

代碼分析：

1.ul標簽內(nèi)部含有10個li標簽，因為每個li標簽的圖標為不同的子圖片，所以給每個li標簽里添加不同的class屬性。

2.每個li標簽的class屬性為d的p標簽里面包含了3個p標簽，它們的class屬性為img、mask和play，這三個標簽依次為主題圖標、遮罩圖標和播放圖標，而他們的父節(jié)點p(class屬性為d)以背景圖片作為邊框。

3.每個li標簽都添加了onmouseover以及onmouseout事件響應(yīng)函。

4.最后面一段js代碼是模擬音樂盒歌曲切換時的歌曲名上升的效果。

首先程序獲取id為frm的標簽，并獲取該標簽的所有l(wèi)i子標簽，同時獲取所有l(wèi)i的span標簽，并綁定第一個span標簽到li標簽對象的span_obj上。

兩個超時函數(shù)：shownext()以及showup()，其中showup()函數(shù)負責產(chǎn)生歌名升起效果，而函數(shù)shownext()負責切換到下一個音樂臺的歌曲的播放。

對象的方法內(nèi)部不可以設(shè)置自身為超時函數(shù)

以上就是實例展示DIV+CSS實現(xiàn)電臺列表的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。