- 1PS提示：因為圖層已鎖定，無法編輯圖層的處理方法
- 2Adobe Illustrator CS5 序列號大全
- 3picacg蘋果版怎么找不到|picacg ios版是不是下架了介紹
- 4ACDsee注冊碼免費分享（含ACDsee18、ACDsee10等版本）
- 5蘋果iphone自動時間不準確的多種校正方法
- 6PDF瀏覽器能看3D文件嗎？PDF瀏覽器看3D文件圖文詳細教程
- 7Potato(馬鈴薯聊天)怎么注冊不了|Potato不能注冊處理方法介紹
- 8Potato(土豆聊天)怎么換頭像|Potato app更改頭像方法介紹
- 9ipad版office如何激活? office365激活的圖文說明教程
- 10最新的Adobe Illustrator CS4序列號大全
- 11Mac怎么通過設置VPN來登錄youtube等國外網站
- 12qq郵件是否已讀怎么看 QQ郵箱已經發出去的郵件怎么知道對方是否已經查看
[摘要]這篇文章主要介紹了p+CSS實現電臺列表設計的示例代碼,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧CSS Spite技術：也就是CSS精靈技術，實際上CSS的精靈就是圖片里的一個個的圖標元素，這些圖標可以使按鈕、標簽以及logo等等。很多網站中都應用了該技術，可有效...
這篇文章主要介紹了p+CSS實現電臺列表設計的示例代碼,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧CSS Spite技術：也就是CSS精靈技術，實際上CSS的精靈就是圖片里的一個個的圖標元素，這些圖標可以使按鈕、標簽以及logo等等。很多網站中都應用了該技術，可有效減少傳輸請求次數，所需要的圖標匯總在一張圖片中，一次下載即可整個頁面應用
以下示例主要是CSS精靈技術的應用，直接Po代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酷狗電臺列表設計</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>網絡紅歌</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>經典</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>生成效果：
代碼分析：
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實現電臺列表的詳細內容，更多請關注php中文網其它相關文章！
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
推薦資訊 總人氣榜
相關文章
- html中對于a標簽的onclick以及href的執行順序詳細說明
- 在a標簽的href與onclick中使用JavaScript的區別
- html中a標簽的href與onclick具體說明
- html中對于a標簽href屬性中的一個很少人知道的坑
- html頁面中a標簽href屬性可以不寫嗎？
- html中a標簽href=#與href=javascript:void(0)的區別解析
- html中a標簽href='#'與href='###'的區別分享
- html中a標簽href=""的幾種用法說明
- html中對于a標簽偽類中的visited無效的處理方法
- 對于html頁面優化的案例詳細說明
- 比較div中的offsetLeft與style.left用法區別
- 區分input submit、button與回車鍵提交數據幾者之間的區別不同
