1 html5標簽
- header 頭部崎淳；
- footer 尾部削锰；
- nav 導(dǎo)航菜單欄；
- aside 側(cè)邊欄官辈；
- section 頁面分塊
- hgroup 標題組合
- article 文章
- dialog 對話翘瓮，配合dt,dd
- figure 放置媒體資源
- figureCaption 媒體標題
- audio 音頻
- video 視頻
- 注意：通過src加載進來的音頻和視頻無法播放贮折，通過autoplay屬性來自動播放，如果想控制资盅，則設(shè)置controls
- source 放置音頻視頻地址调榄，兼容性
<audio autoplay controls> <source src="" type="audio/mp4"> </audio> - 驗證代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5體驗</title> </head> <body> <header>頁面頂部/頭部</header> <nav>導(dǎo)航菜單欄</nav> <section class="articleList"> <aside>側(cè)邊欄</aside> <hgroup> <h2>主標題</h2> <h4>副標題</h4> </hgroup> <article> <h6>文章標題</h6> <p>文章主題內(nèi)容</p> </article> </section> <section class="dialog"> <dialog> <dt>對話標題</dt> <dd>對話內(nèi)容</dd> </dialog> </section> <section class="mediaList"> <figure> <figureCaption>媒體標題</figureCaption> <audio src="media/01.mp3" autoplay="autoplay" controls>瀏覽器不支持該音頻文件</audio> <video src="" autoplay="autoplay" controls>瀏覽器不支持該視頻文件</video> </figure> </section> <footer>尾部</footer> </body> </html> - 鏈接資料
html5和css3學(xué)習(xí)大綱
html5基礎(chǔ)知識1
2 音樂播放器實例
- 思路：
- 頁面結(jié)構(gòu)li浮動，新建ins定位在li中呵扛，用于運動每庆；
- 通過each遍歷li數(shù)組，然后再each中獲取每個li元素今穿，獲取其索引值缤灵，再設(shè)置其背景色；
- 添加mouseenter和mouseleave事件荣赶，讓ins元素移入li時凤价，移動到頂部，移出li后拔创，回到原來位置利诺；
- 給document對象設(shè)置keydown事件，判斷鍵盤碼來控制設(shè)置不同索引值的li元素自動觸發(fā)mouseenter事件剩燥；
- 利用定時器在間隔時間后慢逾，自動觸發(fā)mouseleave事件，讓其回到原來位置灭红；
- 知識點：
- 頁面結(jié)構(gòu)中設(shè)置li元素屬性box-sizing的屬性值為border-box侣滩，則元素設(shè)置的總寬度則包含內(nèi)padding和外邊框；
- jQuery中事件
$("li").mouseenter(function(){})里面匿名函數(shù)中的this為觸發(fā)的元素变擒，默認傳入一個事件對象實參君珠； - jQuery中each方法
$("li").each(function(){})作用是遍歷li數(shù)組，每次向匿名函數(shù)中傳兩個實參娇斑，index和item策添，索引值和元素本身，里面的this為元素本身毫缆； - jQuery中trigger方法
$(this).trigger("mouseover")作用是自動觸發(fā)事件唯竹； - audio對象身上的方法load()和pla()方法，為原生JS對象的方法苦丁；
- 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音樂播放器實例</title> <style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 1120px; margin: 40px auto; border: 1px solid blue; } ul::after{ display: block; height: 0; content: ""; clear: both; } ul>li{ width: 140px; height: 60px; line-height: 60px; text-align: center; float: left; position: relative; } ul>li ins{ position: absolute; width: 140px; height: 60px; left: 0; top: 60px; } ul>li+li{ border-left: 1px dashed red; box-sizing: border-box; } </style> </head> <body> <section> <ul> <li>音符1</li> <li>音符2</li> <li>音符3</li> <li>音符4</li> <li>音符5</li> <li>音符6</li> <li>音符7</li> <li>音符8</li> </ul> </section> <section class="mediaList"> <figure> <audio src="audio/1.mp3"></audio> <audio src="audio/2.mp3"></audio> <audio src="audio/3.mp3"></audio> <audio src="audio/4.mp3"></audio> <audio src="audio/5.mp3"></audio> <audio src="audio/6.mp3"></audio> <audio src="audio/7.mp3"></audio> <audio src="audio/8.mp3"></audio> </figure> </section> <script src="JS/jquery.js"></script> <script> var ary=["red","yellow","blue","pink","orange","black","purple","green"]; $("li").each(function (index, item) { $(item).append("<ins>").find("ins").css("backgroundColor",ary[index]); }).mouseenter(function () { //此時的this為觸發(fā)元素浸颓，并且傳入一個事件對象實參 $("audio")[$(this).index()].load();//加載音頻 $("audio")[$(this).index()].play();//播放音頻 $(this).find("ins").stop().animate({top:0}); }).mouseleave(function () { $(this).find("ins").stop().animate({top:60}); }); $(document).keydown(function (e) { if(e.keyCode>=49 && e.keyCode<=56){ $("li").eq(e.keyCode%49).trigger("mouseenter"); setTimeout(function () { $("li").eq(e.keyCode%49).trigger("mouseleave") },400)//通過定時器讓其運動回去； } }) </script> </body> </html>
3 原生JS版音樂播放器實例
- 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音符鍵盤實例復(fù)習(xí)</title> <style> *{ margin: 0; padding: 0; list-style: none; } .container{ width: 100%; } .container .wrap{ width: 1127px; height: 60px; margin: 40px auto; border: 1px solid blue; text-align: center; } .container .wrap li{ width: 140px; height: 60px; line-height: 60px; float: left; position: relative; } .container .wrap li+li{ border-left: 1px dashed red; } .container .wrap li ins{ width: 100%; height: 100%; position: absolute; left: 0; top: 60px; } </style> </head> <body> <div class="container"> <ul class="wrap"> <li><p>音符1</p><ins></ins></li> <li><p>音符2</p><ins></ins></li> <li><p>音符3</p><ins></ins></li> <li><p>音符4</p><ins></ins></li> <li><p>音符5</p><ins></ins></li> <li><p>音符6</p><ins></ins></li> <li><p>音符7</p><ins></ins></li> <li><p>音符8</p><ins></ins></li> </ul> <div class="mediaList"> <audio src="./audio/1.mp3"></audio> <audio src="./audio/2.mp3"></audio> <audio src="./audio/3.mp3"></audio> <audio src="./audio/4.mp3"></audio> <audio src="./audio/5.mp3"></audio> <audio src="./audio/6.mp3"></audio> <audio src="./audio/7.mp3"></audio> <audio src="./audio/8.mp3"></audio> </div> </div> <script src="../toolLibrary/myutils.js"></script> <script src="../toolLibrary/finallyAnimate.js"></script> <script src="../toolLibrary/myEvent.js"></script> <script> var oWrap=document.getElementsByTagName("ul")[0]; var aIns=oWrap.getElementsByTagName("ins"); var oMedia=utils.getByClass("mediaList")[0]; var aAudio=utils.getChildren(oMedia,"audio"); var ary=["red","yellow","blue","pink","orange","black","purple","green"]; add(); function add() { //給每個音符添加背景色 for(var i=0; i<aIns.length; i++){ aIns[i].index=i; on(aIns[i],"mouseenter",function () { //播放音樂 aAudio[this.index].load(); aAudio[this.index].play(); clearInterval(this.timer); toMove(this,0); }); on(aIns[i],"mouseleave",function () { clearInterval(this.timer); toMove(this,60); }); utils.setCss(aIns[i],"backgroundColor",ary[i]); } } //給document對象綁定keydown事件 on(document,"keydown",toKeydown); function toKeydown(e) { //1-8對應(yīng)的鍵盤碼為49-56 if(e.keyCode>=49 && e.keyCode<=56){ var m=e.keyCode%49; aAudio[m].load(); aAudio[m].play(); clearInterval(aIns[m].timer); toMove(aIns[m],0); clearTimeout(n); var n=setTimeout(function () { clearInterval(aIns[m].timer); toMove(aIns[m],60) },400) } } //運動 function toMove(ele,topval) { animate({ ele:ele, effect:0, target:{ top:topval }, duration: 300 }) } </script> </body> </html>
