音樂導航

時間 2019-11-13

標籤音樂導航简体版

原文原文鏈接

<!doctype html>html

<html>jquery

<head>數組

<title>音樂導航</title>this

<script>url

*{margin:0;padding:0;}3d

#nav{htm

width:100%;blog

height:56px;ip

margin-top:50px;文檔

background:#1f0a31 url(images/topbg1.jpg) no-repeat;

background-size:100%;/*背景的大小*/

background-position:center top;/*背景的位置*/

}

#nav ul{

width:700px;

height:560px;

margin:0 auto;/*左右自動居中*/

list-style:none;

padding:50px;/*日後移的方法*/

}

#nav ul li{

position:relative;

width:100px;

height:56px;

/*background:blue;*/

float:left;/*左浮動：與父元素的左端對齊往右端顯示，顯示不下就換行接着依次往右端顯示*/

text-algn:center;/*文本左右居中，注意放的位置*/

}

#nav ul li a{

line-height:56px;

color:#fff;

text-decoration:none;

cursor:pointer;

z-index:2;

position:relative;/*相對定位：元素沒有脫離文檔流原來佔據的空間*/

}

#nav ul li i{

width:100px;

height:0px;

background:rgba(0,0,0,0.5);

display:block;

position:absolute;/*漂浮起來了,空間不存在*/

z-index:1;//只有定位元素才能設置層級：層級值越大越優先顯示

left:0;

bottom:0;/*從下往上*/

}

</script>

</head>

<body>

<div id="nav">

<ul>

<li src="data-src"/*h5自定義屬性*/><a href="#">音樂庫</a><i></i></li>

<li><a href="#">歌手庫</a></li>

<li><a href="#">圖庫</a></li>

<li><a href="#">歌詞</a></li>

<li><a href="#">直播</a></li>

<li><a href="#">網頁播放器</a></li>

<li><a href="#">下載KTV</a></li>

</ul>

</div>

/*360導航音樂標籤<i>小標籤*/

<audio src="mp3/do.mp3" id="music"></auto>

<script src="js/jquery.js"></script>

<script>

//鼠標移動到導航上就播放音樂

//給導航元素綁定一個鼠標移上去的事情

//找到音樂標籤並讓他播放音樂

arr=["mp3/do.mp3",

"mp3/dfa.mp3",

"mp3/la.mp3",

"mp3/mi.mp3",

"mp3/re.mp3",

"mp3/si.mp3",

"mp3/sol.mp3",];

//獲取和Li對應的數組中的歌曲播放

$("#nav ul li").hover(functin(){

$(this)鼠標移動到哪一個li就指代哪一個Li

var index=$(this).index;

//改變auto標籤裏面src的路徑爲與鼠標移上去的li對應的歌曲

$("#music").attr("src","attr[index]")

$("#music").get(index).play;

//找到鼠標移上去的li下面的i標籤，而後改變他的高度

$(this).find("i")..animate((height:"56px"),300);

},function(){

$(this).find("i")..animate((height:"0px"),300);

})

</script>

</body>

</html>

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<