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

案例展示DIV+CSS完成電臺(tái)下文

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

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

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

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


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>酷狗電臺(tái)列表設(shè)計(jì)</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="#">徐志強(qiáng) - 想你的時(shí)候</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="#">孫儷 - 美麗信號(hào)</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必點(diǎn)</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>

生成效果：

實(shí)例展示DIV+CSS實(shí)現(xiàn)電臺(tái)列表

代碼分析：

1.ul標(biāo)簽內(nèi)部含有10個(gè)li標(biāo)簽，因?yàn)槊總�(gè)li標(biāo)簽的圖標(biāo)為不同的子圖片，所以給每個(gè)li標(biāo)簽里添加不同的class屬性。

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

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

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

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

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

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

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


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