您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)使用JavaScript制作一個(gè)簡(jiǎn)單的音樂導(dǎo)航功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
效果展示
鼠標(biāo)在導(dǎo)航欄上移動(dòng),每一項(xiàng)發(fā)出一種音符(do re mi fa so la xi),同樣鍵盤上的1-7數(shù)字也可以有同樣的效果。
代碼
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音樂導(dǎo)航</title> <style> * { margin: 0; padding: 0; list-style: none; border: 0; } #nav { width: 706px; height: 40px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } #nav ul { width: 710px; } #nav ul li { float: left; width: 100px; text-align: center; line-height: 40px; border-right: 1px dashed #ccc; position: relative; } #nav ul li a { /* a 標(biāo)簽填充整個(gè) li */ width: 100%; height: 100%; display: inline-block; } a { text-decoration: none; color: #000000; } span { width: 100px; height: 40px; background: skyblue; position: absolute; left: 0; top: 40px; z-index: -1; } </style> </head> <body> <nav id="nav"> <ul id="ul"> <li><a href="">千千音樂</a><span></span><audio src=" rel="external nofollow" source/a1.mp3"></audio></li> <li><a href="">echo回聲</a><span></span><audio src=" rel="external nofollow" source/a2.mp3"></audio></li> <li><a href="">酷狗音樂</a><span></span><audio src=" rel="external nofollow" source/a3.mp3"></audio></li> <li><a href="">QQ音樂</a><span></span><audio src=" rel="external nofollow" source/a4.mp3"></audio></li> <li><a href="">酷我音樂</a><span></span><audio src=" rel="external nofollow" source/a5.mp3"></audio></li> <li><a href="">網(wǎng)易云音樂</a><span></span><audio src=" rel="external nofollow" source/a6.mp3"></audio></li> <li><a href="">蝦米音樂</a><span></span><audio src=" rel="external nofollow" source/a7.mp3"></audio></li> </ul> </nav> <script src="js/myFunc.js"></script> <script> window.onload = function () { // 1.獲取標(biāo)簽 var ul = $("ul"); var allLis = ul.children; // 2.監(jiān)聽鼠標(biāo)進(jìn)入 li 標(biāo)簽 for(var i=0; i<allLis.length; i++){ allLis[i].onmouseover = function () { // 2.1 緩動(dòng)動(dòng)畫 buffer(this.children[1], {"top": 0}); // 2.2 播放音符 this.children[2].play(); this.children[2].currentTime = 0; }; // 2.3 監(jiān)聽鼠標(biāo)離開 allLis[i].onmouseout = function () { buffer(this.children[1], {"top": 40}); }; // 3.監(jiān)聽鍵盤的點(diǎn)擊(1-7分別代表 do re mi fa so la xi) document.onkeydown = function (event) { var e = event || window.event; // console.log(e.keyCode); var keyCode = e.keyCode -49; buffer(allLis[keyCode].children[1], {"top": 0}, function () { buffer(allLis[keyCode].children[1], {"top": 40}) }) // 2.2 播放音符 allLis[keyCode].children[2].play(); allLis[keyCode].children[2].currentTime = 0; } } } </script> </body> </html>
js/myFunc.js
function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } /** * 緩動(dòng)動(dòng)畫函數(shù) * @param obj * @param json * @param fn */ function buffer(obj, json, fn) { // 1.1 清除定時(shí)器 clearInterval(obj.timer); // 1.3 設(shè)置定時(shí)器 var begin = 0, target = 0, speed = 0; obj.timer = setInterval(function () { // 1.3.0 標(biāo)記 var flag = true; for(var k in json){ // 1.3.1 求出初始值 if("opacity" === k){ // 透明度 console.log(getCssStyleAttr(obj, k)); begin = Math.round(parseFloat(getCssStyleAttr(obj, k)) * 100) || 100; // 獲取 CSS 樣式值 target = parseInt(json[k] * 100); }else if("scrollTop" === k){ begin = Math.ceil(obj.scrollTop); target = parseInt(json[k]); }else { // 其他情況 begin = parseInt(getCssStyleAttr(obj, k)) || 0; // 獲取 CSS 樣式值 target = parseInt(json[k]); } // console.log(begin, target); // 1.4 求出步長(zhǎng) // 緩動(dòng)動(dòng)畫原理:盒子本身的位置 + 步長(zhǎng)(不斷變化的,由大變?。? // 步長(zhǎng):begin = begin + (end - begin) * 緩動(dòng)系數(shù) speed = (target - begin) * 0.2; // 1.6 判斷是否向上取整 speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed); // 1.5 移動(dòng)起來 if("opacity" === k){ // 透明度 // w3c 的瀏覽器 obj.style.opacity = (begin + speed) / 100; // ie obj.style.filter = "alpha(opacity=" + (begin + speed) +")"; }else if("scrollTop" === k){ obj.scrollTop = begin + speed; }else { obj.style[k] = begin + speed + "px"; } // 1.7 判斷 if(begin !== target){ flag = false; } } // 1.8 清除定時(shí)器 if(flag){ clearInterval(obj.timer); // 判斷有沒有回調(diào)函數(shù) if(fn){ fn() } } }, 20) }
關(guān)于使用JavaScript制作一個(gè)簡(jiǎn)單的音樂導(dǎo)航功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。