QQ音樂移動(dòng)端項(xiàng)目涉及的技術(shù)棧
- rem的響應(yīng)式單位盲再；
- js中的正則框全；
- 數(shù)據(jù)獲戎继弧汁针；
- zepto和zepto中的訂閱發(fā)布；
- html5+css3砚尽；
- less;
移動(dòng)開發(fā)中的rem設(shè)置
- rem設(shè)置
- 優(yōu)點(diǎn)：在不同的屏幕下施无，字體的大小以及寬高的設(shè)置不能使用定值px，需要在不同的屏幕下按比例縮放必孤；所以需要設(shè)置rem;
- rem相對(duì)于瀏覽器中的html根標(biāo)簽的fontSize大小成倍數(shù)設(shè)置猾骡；與其他值無關(guān)瑞躺；
- 實(shí)際開發(fā)
- 實(shí)際開發(fā)中屏幕大小為320px的設(shè)備，設(shè)計(jì)為2倍的屏幕設(shè)置兴想，即按640px的設(shè)計(jì)幢哨，縮小后會(huì)很清晰；
- 需要通過JS代碼嫂便，來設(shè)置在不同屏幕下的比例值縮放捞镰；
- 以下代碼中：1)設(shè)計(jì)時(shí)屏幕的大小為640px;設(shè)置的html根標(biāo)簽fontSize大小為100px;2)設(shè)置后的結(jié)果是在設(shè)計(jì)的屏幕中1rem=100px;如果需要設(shè)置30px，則設(shè)置為0.3rem;
//獲取可視區(qū)域的寬度 var $screenWidth=$(window).width(); //在實(shí)際開發(fā)中會(huì)規(guī)定好在制定屏幕下的字體大斜刑妗岸售；一般在320px的瀏覽器屏幕中，會(huì)放大一倍蔚龙，即640px屏幕下制作冰评，然后設(shè)置的字體大小為定值，通過比例木羹，讓其在不同的屏幕下甲雅，也按比例縮放； var kfWidth=640; var fSize=100; //jQuery中獲取html根標(biāo)簽 var $html=$("html");//在原生JS中獲取html標(biāo)簽：document.documentElement; var $htmlFont=$screenWidth/kfWidth*fSize; //jQuery中設(shè)置html的字體大小 $html.css("fontSize",$htmlFont);- 在調(diào)試中將代碼放在resize事件中坑填；便于調(diào)試抛人；
QQ音樂頁面項(xiàng)目實(shí)戰(zhàn)開發(fā)
移動(dòng)項(xiàng)目開發(fā)前的準(zhǔn)備
- 項(xiàng)目開發(fā)的前提條件：
- 都是以屏幕大小為640px的基準(zhǔn)下制作的；html的字體大小設(shè)置為100px,所有的單位都用rem;其中1rem=100px;
- html結(jié)構(gòu)
- meta視口創(chuàng)建:
<meta name="viewport" content="width=device-width, initial-scale=1.0">;快捷鍵meta:vp+tab脐瑰； - 引入less文件：包括index.less文件和less.js文件妖枚；放在head中；
- 引入JS文件：包括zepto.js文件和index.js文件苍在；放在body里面的最后面绝页；
- html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QQ音樂實(shí)戰(zhàn)</title> <link rel="stylesheet" type="text/less" href="css/index.less"> <script src="js/less.min.js"></script> </head> <body> <section class="musicBox">...</section> <script src="js/zepto.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script> </body> </html> - meta視口創(chuàng)建:
- less設(shè)置
- 引入reset.less文件和public.less文件；
- html和body元素的寬高設(shè)置為100%寂恬；
- less代碼：
@import "reset.less"; @import (reference)"public.less"; html,body{ width: 100%; height: 100%; } - JS設(shè)置
- 目的：為了保證在所有屏幕下的rem換算的值能夠相對(duì)于640px屏幕下值進(jìn)行等比例縮小和放大续誉；
- 以屏幕寬度為640px和html的fontSize值為100px為基礎(chǔ)，進(jìn)行換算初肉，設(shè)置不同屏幕下的fontSize值酷鸦；
- 注意：
- 屏幕尺寸大于640px后，讓musicBox容器的寬度設(shè)置為640px牙咏，并設(shè)置居中臼隔；
- 屏幕尺寸大于640px后，設(shè)置為html的fontSize值為100px;
- 保證在屏幕尺寸大于640px后妄壶，能夠正常顯示摔握；
- JS代碼：
//設(shè)置在不同屏幕下的html的fontSize值； $(window).on("resize",resizeTo).trigger("resize"); function resizeTo() { var $screenWidth=$(window).width(); var $sjWidth=640; var $sjFont=100; var $htmlFont; //當(dāng)屏幕寬度大于640px時(shí)丁寄，讓$screenWidth值為640px,則計(jì)算出來的fontSize值一直為100px; //保證了屏幕中的rem值穩(wěn)定盒发，不會(huì)再隨著屏幕改變而改變例嘱； if($screenWidth>$sjWidth){ $screenWidth=$sjWidth; $("html").css({ width:$sjWidth, margin: "0 auto" }); } $htmlFont=$screenWidth/$sjWidth*$sjFont; $("html").css("fontSize",$htmlFont); }
QQ音樂頁面制作
1.1大背景的制作
- 思路：
- 在musicBox容器中創(chuàng)建
<div class="musicbg"></div>;添加定位，寬高均為100%宁舰；設(shè)置背景圖為backgroundSize為cover; - 給musicbg添加模糊度
-webkit-filter: blur(5px); filter: blur(5px); - 創(chuàng)建遮罩層：添加定位拼卵，背景顏色用透明度設(shè)置，達(dá)到遮罩層的效果蛮艰；
- 給musicbg和遮罩層設(shè)置層級(jí)為負(fù)數(shù)腋腮；保證后面的元素覆蓋在上面；
- 在musicBox容器中創(chuàng)建
- 知識(shí)點(diǎn)：
- 元素脫離文檔流后壤蚜，即添加定位和浮動(dòng)后即寡，不會(huì)繼承父級(jí)寬度，需要重新設(shè)置寬度袜刷；
- 模糊度代碼的設(shè)置聪富；
- 遮罩層使用背景色的透明度；
- 利用層級(jí)進(jìn)行覆蓋著蟹；
- 注意：
- 在chrome瀏覽器控制臺(tái)上調(diào)試時(shí)墩蔓，使用屏幕大小為320px的屏幕調(diào)試；屏幕中的尺寸為實(shí)際設(shè)置的尺寸值的一半萧豆；
- 代碼：
- html代碼：
<section class="musicBox"> <div class="musicbg"></div> <div class="musicshadow"></div> </section>- less代碼：
.musicBox{ width: 100%; height: 100%; position: relative; .musicbg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -2; background: url("../img/piao.jpg") no-repeat center; background-size: cover; -webkit-filter: blur(5px); filter: blur(5px); } .musicshadow{ width: 100%; height: 100%; position: absolute; left: 0; right: 0; z-index: -1; background-color: rgba(1,1,1,.3); } }
1.2頭部區(qū)域的制作
- 重點(diǎn)：
- 右側(cè)播放圖標(biāo)的設(shè)計(jì)
- 兩個(gè)圖標(biāo)的容器添加定位奸披；利用顯示隱藏設(shè)置來實(shí)現(xiàn)切換；
- 在容器中添加背景圖標(biāo)涮雷；通過背景圖的定位來控制位置阵面；
- 背景圖片的大小不能使用px，要使用rem值進(jìn)行換算洪鸭；換算后是相對(duì)于640px尺寸下的值样刷，在調(diào)試中用320px尺寸的屏幕時(shí)，數(shù)值為一半览爵；
- 右側(cè)播放圖標(biāo)的設(shè)計(jì)
- 知識(shí)點(diǎn)：
- 在less文件中使用
.類名 (){}創(chuàng)建函數(shù)置鼻，括號(hào)中可以傳入實(shí)參；可以設(shè)置默認(rèn)值拾枣；
.spriteFn(@x:0,@y:0){ background: url("../img/timg.jpg") no-repeat @x @y; background-size: 4rem; } - 在less文件中使用
- 代碼：
- html代碼：
<section class="musicBox"> <div class="musicbg"></div> <div class="musicshadow"></div> <header class="clearfix"> <div class="h-left"> <img src="img/piao.jpg" alt=""> <p> <span>天空</span><br/> <span>樸信惠</span> </p> </div> <div class="h-right"> <div class="hr-play"></div> <div class="hr-pause"></div> </div> </header> </section>- less代碼：
header{ padding: .3rem; color: @color-white; background-color: rgba(0,0,0,.3); .h-left{ float: left; >img{ float: left; width: 1.2rem; height: 1.2rem; margin-right: .4rem; } >p{ float: left; font-size: .35rem; >span{ line-height: .63rem; } } } .h-right{ float: right; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid @color-white; box-sizing: border-box; margin-top: .2rem; margin-right: .1rem; position: relative; .hr-play,.hr-pause{ position: absolute; width: .4rem; height: .4rem; left: 50%; top:50%; margin-top: -.2rem; margin-left: -.2rem; } .hr-play{ .spriteFn(@x:-.4rem,@y:-1.3rem); display: none; } .hr-pause{ .spriteFn(@x:-.4rem,@y:-.36rem); } } }
1.3歌詞區(qū)域初制作
- html結(jié)構(gòu)：
- 設(shè)置main容器，設(shè)置上下margin值盒让；高度由JS計(jì)算設(shè)置;
- 在main容器中梅肤，創(chuàng)建lyc歌詞容器，容器添加絕對(duì)定位邑茄，目的是為了調(diào)整top值姨蝴，來達(dá)到歌詞的更新；
- 設(shè)置lyc歌詞容器中的p元素肺缕，通過假數(shù)據(jù)將樣式設(shè)置好左医；
- main容器的高度為定值授帕，而lyc歌詞容器的高度是通過內(nèi)容撐開的；給main設(shè)置overflow:hidden浮梢，這樣lyc容器多出來的會(huì)被隱藏跛十，通過定位不斷的顯示；
1.4footer區(qū)域的制作
- 思路：分為三個(gè)區(qū)域
- 收藏區(qū)域： 通過右浮動(dòng)來做storage;
- 進(jìn)度條區(qū)域：分為左右兩個(gè)時(shí)間區(qū)域秕硝，和中間的進(jìn)度條區(qū)域芥映；
- 左右兩個(gè)時(shí)間區(qū)域利用浮動(dòng)制作，必須設(shè)置寬度才能浮動(dòng)远豺；
- 中間的進(jìn)度條區(qū)域：
- 設(shè)置為行內(nèi)塊
inline-block類型奈偏；利用容器的text-align: center來居中顯示； - 利用
vertical-align: middle/number來設(shè)置垂直方向上的位置躯护； - 在progress容器中添加一個(gè)div惊来，相對(duì)于容器絕對(duì)定位，高度相同棺滞，寬度可以自由設(shè)置裁蚁，背景色為綠色，二者疊加在一起检眯；通過控制div的寬度厘擂，來呈現(xiàn)出進(jìn)度條的進(jìn)程；
- 設(shè)置為行內(nèi)塊
- 底部下載區(qū)域：通過偽類元素設(shè)置背景圖锰瘸，完成QQ圖標(biāo)的設(shè)置刽严；
- footer區(qū)域設(shè)置定值高度，讓底部下載區(qū)域距離底部有一段空隙避凝；
1.5歌詞區(qū)域的靜態(tài)制作
- 1）計(jì)算設(shè)置不同屏幕下歌詞區(qū)域的高度
- 在拉伸事件中設(shè)置JS代碼舞萄；
- 獲取屏幕的視口高度-header區(qū)域的高度-footer區(qū)域的高度-歌詞區(qū)域設(shè)置的上下margin值；
- 注意：設(shè)置的margin值為rem值管削，需要乘上不同屏幕下的html的fontSize值倒脓；在jQuery中height()方法獲取的高度不包含padding值，所以需要減去padding值含思；或使用innerHeight()或outerHeight();
- JS代碼：
//1 計(jì)算不用屏幕下的main歌詞區(qū)域的高度 //注意：在jQuery中$().height()拿到的高度不包含padding和邊框崎弃，而zpeto中包含； //在jQuery中用$().outerHeight()可以拿到包含padding和邊框的高度含潘，但是zpeto中不支持此屬性饲做； var $screenH=$(window).height(); var $mainH=$screenH-$("header").height()-$("footer").height()-0.8*$htmlFont-0.6*$htmlFont;//jQuery引入后，會(huì)覆蓋zpeto遏弱； $(".main").css("height",$mainH); - 2）從后臺(tái)獲取歌詞數(shù)據(jù)盆均，轉(zhuǎn)化為需要的格式；
- 通過
$.ajax()來過去后臺(tái)數(shù)據(jù)漱逸，此時(shí)獲取到的時(shí)字符串泪姨；建立一個(gè)自執(zhí)行函數(shù)的格式 - 將字符串分割為數(shù)組游沿，forEach遍歷數(shù)組，通過正則和replace方法配合使用肮砾，匹配出滿足要求的內(nèi)容诀黍，通過小分組，拿到分唇敞，秒蔗草，文字；并給每一項(xiàng)加一個(gè)不同的id值疆柔；
- 最終獲取的數(shù)據(jù)為一個(gè)數(shù)組咒精，數(shù)組中的每一項(xiàng)時(shí)包含分，秒旷档，文字的對(duì)象模叙；
- 通過訂閱式發(fā)布fire函數(shù)來傳出數(shù)據(jù)；
- JS代碼：
//2 獲取后臺(tái)歌詞數(shù)據(jù)鞋屈，轉(zhuǎn)換成需要的格式通過訂閱式發(fā)布輸出 var data=[], $id=0; //ajax獲取數(shù)據(jù)范咨，經(jīng)過轉(zhuǎn)化后，獲取數(shù)組厂庇，然后通過jQuery中的訂閱發(fā)布傳入數(shù)據(jù)渠啊； var musicRender=(function () { return { init:function () { $.ajax({ url:"data/lyc.txt", dataType:"text", type: "get", success: function (result) { var ary=result.split("\\n");//\n需要轉(zhuǎn)義符，將獲取的字符串?dāng)?shù)據(jù)权旷，分割為數(shù)組替蛉； var reg=/\[(\d{2})\:(\d{2})\.(?:\d{2})\](\D+)/g;//通過小分組拿到分，秒拄氯，文字躲查； //forEach方法，遍歷數(shù)組译柏，第一項(xiàng)為數(shù)組元素內(nèi)容镣煮，第二項(xiàng)為數(shù)組元素的索引值 ary.forEach(function (item,index) { //item為每一項(xiàng)的字符串，通過replace方法配合正則鄙麦，進(jìn)行逐一匹配操作典唇； item.replace(reg,function () { data.push({ minute:arguments[1], seconds: arguments[2], lyc:arguments[3], id:$id }) }); $id++; }); callbacks.fire(data);//向訂閱發(fā)布傳入數(shù)據(jù) } }) } } })(); musicRender.init(); - 通過
- 3）訂閱式綁定函數(shù)，函數(shù)中獲取數(shù)據(jù)胯府，通過字符串拼接插入到DOM結(jié)構(gòu)中介衔；
- 通過訂閱式綁定函數(shù)獲取數(shù)據(jù)；獲取的數(shù)據(jù)為原生數(shù)組盟劫，必須用$.each()方法來遍歷數(shù)組夜牡；
- 通過字符串拼接插入DOM結(jié)構(gòu)与纽；
- 將data1數(shù)組中的分侣签，秒塘装，通過data自定義屬性綁定到每個(gè)歌詞的p元素上；
- JS代碼：
//訂閱式綁定方法影所；獲取傳入的數(shù)據(jù)蹦肴，綁定在頁面中； callbacks.add(function (data1) { //此時(shí)獲得的數(shù)據(jù)為原生數(shù)組 var str=""; $.each(data1,function (index, item) { //字符串拼接猴娩，將數(shù)據(jù)放在自定義屬性上阴幌； str+=`<p data-minute="${item.minute}" data-seconds="${item.seconds}">${item.lyc}</p>` }); $lyc.html(str); });
1.6audio音頻區(qū)域的制作
-
1）創(chuàng)建audio標(biāo)簽，放入到footer中卷中；
- 代碼：
<audio src="music/cc.mp3"></audio> - 注意：audio自帶高度矛双，所以給其添加定位，讓其脫離文檔流蟆豫；不占據(jù)位置议忽；
- 代碼：
-
2）加載頁面后音頻播放
- 訂閱綁定，綁定的函數(shù)依次執(zhí)行十减；
- 函數(shù)中設(shè)置
oAudio.play()栈幸，音頻播放； - oAudio綁定canplay事件帮辟，當(dāng)音頻播放時(shí)速址，進(jìn)入函數(shù)執(zhí)行；
- 通過
oAudio.duration獲取音頻的總時(shí)間長度由驹，轉(zhuǎn)化為分芍锚，秒的固定格式，插入到$duration中荔棉； - 創(chuàng)建定時(shí)器闹炉，每隔一秒執(zhí)行f1()函數(shù)；
- f1()函數(shù)中設(shè)置：
- $current中的數(shù)組更新：
- 通過
oAudio.currentTime獲取音頻的當(dāng)前播放時(shí)間润樱，轉(zhuǎn)化為固定格式渣触，插入到$current中；
- 通過
- 歌詞區(qū)域的制作：
- 通過獲取的當(dāng)前音頻時(shí)間值壹若，進(jìn)行篩選p元素身上的自定義屬性嗅钻；進(jìn)而控制相對(duì)應(yīng)的文字變色顯示；
- 利用filter過濾器店展，通過屬性判斷养篓，過濾選擇；
- 將獲取的p添加active類名赂蕴；其他的兄弟元素刪除此類名柳弄；
- 此時(shí)文字會(huì)跟隨音樂的播放而對(duì)應(yīng)變色顯示；
- 設(shè)置lyc歌詞容器的top值，來進(jìn)行歌詞的顯示和隱藏碧注，通過p的索引值嚣伐，來控制上移的距離；
- 進(jìn)度條的進(jìn)度更新：
- 通過控制time-line的寬度值萍丐，來顯示進(jìn)度轩端；通過設(shè)置百分?jǐn)?shù)；
- 利用獲取的當(dāng)前播放時(shí)間與總時(shí)間的比值獲得比例逝变，然后設(shè)置寬度為此百分比基茵；
- 比較當(dāng)前播放時(shí)間和總時(shí)間：當(dāng)二者相等時(shí)，證明歌曲播放完壳影；
- 關(guān)閉定時(shí)器拱层；
- 設(shè)置歌曲暫停，設(shè)置暫停按鈕宴咧；
- $current中的數(shù)組更新：
- 秒轉(zhuǎn)化為固定格式的分舱呻，秒的函數(shù)知識(shí)點(diǎn)：
- 分的獲取用除號(hào)，然后向下取整悠汽；秒的獲取用%號(hào)箱吕，取余；然后向上取整柿冲；這樣會(huì)讓歌詞比音樂塊一些茬高；
- 秒里面由于是向上取整，會(huì)出現(xiàn)60假抄；所以需要進(jìn)行條件判斷：當(dāng)秒為60時(shí)怎栽，秒賦值為0；分自加1宿饱；
- 分和秒中的數(shù)字熏瞄，會(huì)出現(xiàn)小于10的情況，所以需要進(jìn)行重新判斷賦值谬以，通過字符串拼接强饮，將1轉(zhuǎn)化為"01"；
- 返回一個(gè)固定格式为黎；
- 函數(shù)代碼：
//創(chuàng)建函數(shù)邮丰，用于轉(zhuǎn)化時(shí)間格式 function timeFormat(time){ var min=Math.floor(time/60);//分鐘用向下取整; var sec=Math.ceil(time%60);//秒用向上取整；這樣會(huì)讓歌詞比音樂快一些铭乾； //判斷當(dāng)秒數(shù)為60時(shí)剪廉，變?yōu)?，分鐘加等1炕檩； if(sec===60){ sec=0; min+=1; } min=min<10?"0"+min:""+min;//字符串拼接斗蒋；得到的是字符串； sec=sec<10?"0"+sec:""+sec; return min+":"+sec; } - JS代碼：
//創(chuàng)建函數(shù)，用于轉(zhuǎn)化時(shí)間格式 function timeFormat(time){ var min=Math.floor(time/60);//分鐘用向下取整; var sec=Math.ceil(time%60);//秒用向上取整泉沾；這樣會(huì)讓歌詞比音樂快一些骤星； //判斷當(dāng)秒數(shù)為60時(shí)，變?yōu)?爆哑，分鐘加等1； if(sec===60){ sec=0; min+=1; } min=min<10?"0"+min:""+min;//字符串拼接舆吮；得到的是字符串揭朝； sec=sec<10?"0"+sec:""+sec; return min+":"+sec; } //4 進(jìn)入頁面歌曲播放；獲取音頻的當(dāng)前時(shí)間色冀，控制歌詞更新 callbacks.add(function () { oAudio.play();//加載頁面后潭袱，歌詞立刻播放； //拿到當(dāng)前音頻對(duì)象的總時(shí)間锋恬，為總秒數(shù)屯换；轉(zhuǎn)化格式后賦給$duratoin oAudio.addEventListener("canplay",function () { $duration.html(timeFormat(oAudio.duration)); timer=setInterval(fn1,1000);//開啟定時(shí)器，不斷獲取新的currentTime }) }); function fn1() { //獲取當(dāng)前的音樂時(shí)間与学，賦值在$current中彤悔； var currentTime=timeFormat(oAudio.currentTime); $current.html(currentTime); //通過獲取的當(dāng)前時(shí)間值，進(jìn)行篩選p元素身上的自定義屬性索守；進(jìn)而控制相對(duì)應(yīng)的文字變色顯示晕窑； var minute=currentTime.split(":")[0]; var seconds=currentTime.split(":")[1]; //利用filter過濾器，通過屬性判斷卵佛，過濾選擇杨赤； var targetP=$lyc.children("p").filter(`[data-minute="${minute}"]`).filter(`[data-seconds="${seconds}"]`); //將獲取的p添加active類名；其他的兄弟元素刪除類名截汪； targetP.addClass("active").siblings().removeClass("active"); //歌詞的移動(dòng)疾牲，通過給lyc添加定位，控制其top值的變化 var indexP=targetP.index();//通過索引值獲取哪個(gè)p的時(shí)候衙解，開始運(yùn)動(dòng)阳柔； if(indexP>=2){ $lyc.css("top",-(indexP-2)*0.84*$htmlFont); } //進(jìn)度條的設(shè)置：設(shè)置time-line的寬度占progress的寬度百分比 var tlW=Number(oAudio.currentTime/oAudio.duration*100)+"%"; //$time_line.css("width",tlW); $time_line.animate({ width: tlW }); //當(dāng)前時(shí)間等于總時(shí)間時(shí)，停止定時(shí)器蚓峦，按鈕變?yōu)閜ause盔沫； if(oAudio.currentTime===oAudio.duration){ clearInterval(timer); oAudio.pause(); $hr_pause.show(); $hr_play.hide(); } } -
3）播放和暫停的制作
- 訂閱綁定函數(shù)，依次執(zhí)行枫匾；
- 在移動(dòng)端點(diǎn)擊事件架诞，不設(shè)置click，設(shè)置tap干茉；
- 在點(diǎn)擊事件中谴忧，不管進(jìn)行何種操作，都要先關(guān)閉定時(shí)器；
- 通過判斷
oAudio.paused的布爾值沾谓，來進(jìn)行播放和暫停的操作委造； - 在進(jìn)行播放操作中，最好先執(zhí)行一下fn1()函數(shù)均驶，因?yàn)槎〞r(shí)器在1s后才會(huì)運(yùn)行昏兆，存在異步；
- 設(shè)置不同的按鈕顯示妇穴；
- JS代碼：
//5 播放和暫停的制作爬虱； callbacks.add(function () { $btn.on("click",function () {//在移動(dòng)端不添加click時(shí)間，添加tap事件 clearInterval(timer); //在音頻play播放時(shí)腾它，oAudio.paused返回false值跑筝； if(oAudio.paused){ fn1(); timer=setInterval(fn1,1000); oAudio.play(); $hr_play.show(); $hr_pause.hide(); }else{ oAudio.pause(); $hr_pause.show(); $hr_play.hide(); } }) }); -
項(xiàng)目知識(shí)點(diǎn)：
- jQuery和zpeto二者區(qū)別：
- jQuery中
$().width()獲取的是不包含padding和邊框的；而$().innerWidth()包含padding;$().outerWidth()包含padding和邊框瞒滴； - zpeto中只有
$().width()和$().height()曲梗，代表包含padding和邊框的寬高；innerWidth()和outerWidth()不支持妓忍； - jQuery中的存在訂閱式發(fā)布
$.Callbacks()虏两；而zpeto中不存在此方法；
- jQuery中
- jQuery中的訂閱式發(fā)布
- 創(chuàng)建：
var callbacks=$.Callbacks(); - 訂閱綁定：
callbacks.add(function(data1){})世剖；data1為接收fire傳入的數(shù)據(jù)碘举； - 發(fā)布執(zhí)行：
callbacks.fire(data);其中data為傳入匿名函數(shù)的數(shù)據(jù) - 其中add可以綁定多個(gè)函數(shù)，當(dāng)fire執(zhí)行時(shí)搁廓，綁定的函數(shù)依次執(zhí)行引颈，并且每一個(gè)函數(shù)中都會(huì)接收fire傳入的數(shù)據(jù)；
- 創(chuàng)建：
- jQuery中filter屬性值篩選
- 代碼：
var targetP=$lyc.children("p").filter(`[data-minute="${minute}"]`).filter(`[data-seconds="${seconds}"]`); - 歌詞和進(jìn)度條的過渡效果：
- 在css樣式中過渡元素的身上設(shè)置transition屬性境蜕；
- 在JS代碼中給過渡元素設(shè)置animate()方法蝙场；
- audio的知識(shí)
- audio的屬性和方法，全都是原生JS獲取的元素粱年；
-
oAudio.play()：音頻播放售滤； -
oAudio.pause()：音頻暫停； -
oAudio.paused：獲取暫停的狀態(tài)台诗，返回布爾值完箩；當(dāng)音頻播放時(shí)，獲取的值為false拉队，當(dāng)音頻暫停時(shí)弊知，獲取的值為true; -
oAudio.addEventListener("canplay",function(){}):指的是給oAudio綁定canplay事件，即當(dāng)音頻播放時(shí)粱快，才會(huì)運(yùn)行函數(shù)秩彤； -
oAudio.duration：獲取音頻的總時(shí)間長度叔扼；單位為秒； -
oAudio.currentTime:獲取音頻播放中的當(dāng)前時(shí)間漫雷；單位為秒瓜富； -
oAudio.addEventListener("timeupdate",function(){})：指的是不斷的更新時(shí)間，當(dāng)播放時(shí)降盹，每隔0.3s觸發(fā)一次事件与柑；跟定時(shí)器一樣；
- jQuery和zpeto二者區(qū)別：
