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 div{ margin:5px 0 5px 0; } .d div{ 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 div{ 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)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>酷狗熱歌</div> <span href="#">徐朗 - 小夜曲</span> </div> </li> <li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>DJ熱碟</div> <span href="#">曾春年 - 最幸福的人</span> </div> </li> <li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>網(wǎng)絡(luò)紅歌</div> <span href="#">徐志強(qiáng) - 想你的時(shí)候</span> </div> </li> <li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>新歌</div> <span href="#">孫儷 - 美麗信號(hào)</span> </div> </li> <li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>經(jīng)典</div> <span href="#">游鴻明 - 尋你</span> </div> </li> <li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>懷舊粵語</div> <span href="#">陳慧嫻 - 人生何處不相逢</span> </div> </li> <li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>鋼琴</div> <span href="#">July - My Soul</span> </div> </li> <li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>KTV必點(diǎn)</div> <span href="#">蔡健雅 - 無底洞</span> </div> </li> <li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>思念</div> <span href="#">張杰 - 這就是愛</span> </div> </li> <li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)"> <div class="d"> <div class="img"></div> <div class="mask"></div> <div class="play"></div> </div> <div class="cont"> <div>DJ外文舞曲</div> <span href="#">Jean Cloud Ades</span> </div> </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>生成效果：
代碼分析：
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的div標(biāo)簽里面包含了3個(gè)div標(biāo)簽，它們的class屬性為img、mask和play，這三個(gè)標(biāo)簽依次為主題圖標(biāo)、遮罩圖標(biāo)和播放圖標(biāo)，而他們的父節(jié)點(diǎn)div(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ù)
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
