課程
/前端開(kāi)發(fā)
/HTML/CSS
/H5+JS+CSS3實(shí)現(xiàn)七夕言情
為什么那個(gè)x 0.5 y0.5 顯示出來(lái)之后小男孩走路的y軸 ?會(huì)往下偏
2017-03-09
源自:H5+JS+CSS3實(shí)現(xiàn)七夕言情 3-5
正在回答
因?yàn)閣alkrun定義的就是兩個(gè)方向運(yùn)動(dòng)? 如果你不想讓Y軸運(yùn)動(dòng)? 可以在?walkrun參數(shù)中不傳入Y? 也就是只傳入前兩個(gè)參數(shù)就好了
我也是,你解決了嗎
首先看的Qixi.js里函數(shù)實(shí)現(xiàn)的方法。就是先獲得當(dāng)前視圖的大小(窗口大小因?yàn)槭亲赃m應(yīng))。
// 計(jì)算移動(dòng)距離
function calculateDist(direction, proportion) {
? ? return (direction == "x" ?
? ? ? ? visualWidth : visualHeight) * proportion;
}
這個(gè)函數(shù)是計(jì)算當(dāng)前視圖(寬,高)的一半,stratRun這個(gè)函數(shù)是設(shè)置小男孩的top值和left值。根據(jù)walkRun函數(shù)來(lái)通過(guò)后來(lái)設(shè)置好的top和left值是實(shí)現(xiàn)移動(dòng)的動(dòng)畫(huà)效果。
你說(shuō)的小男孩往下走是因?yàn)楸緛?lái)小男孩的top是小于后來(lái)的設(shè)置好的top值的。所以會(huì)往下走。
原的top值是
//獲取小男孩這個(gè)節(jié)點(diǎn)。
var $boy = $("#boy");
var boyHeight = $boy.height();
? ? $('#boy').css({
? ? ? 'top': pathY- boyHeight+25,
? ? ? ?});
現(xiàn)在的top是當(dāng)前視圖的一般
現(xiàn)在的top值是略微大于原小男孩的top值的 所以Y軸往下移動(dòng)
可以看上傳的圖片 黑色的線是原top值 紅色的是后來(lái)要移動(dòng)到的top值 根據(jù)公式比較的話應(yīng)該現(xiàn)有的top要大一些
舉報(bào)
為七夕節(jié)準(zhǔn)備的H5+JS+CSS3特效案例,由淺入深案例拆分講解
1 回答走路的狀態(tài)不能改變
2 回答為什么一直都沒(méi)有向前走動(dòng)的效果啊
3 回答進(jìn)入頁(yè)面就自動(dòng)走路
2 回答點(diǎn)擊開(kāi)始走路沒(méi)有用!!
1 回答點(diǎn)擊開(kāi)始走路,小人不見(jiàn)了
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢(xún)優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2018-09-04
因?yàn)閣alkrun定義的就是兩個(gè)方向運(yùn)動(dòng)? 如果你不想讓Y軸運(yùn)動(dòng)? 可以在?walkrun參數(shù)中不傳入Y? 也就是只傳入前兩個(gè)參數(shù)就好了
2017-04-27
我也是,你解決了嗎
2017-03-13
首先看的Qixi.js里函數(shù)實(shí)現(xiàn)的方法。就是先獲得當(dāng)前視圖的大小(窗口大小因?yàn)槭亲赃m應(yīng))。
// 計(jì)算移動(dòng)距離
function calculateDist(direction, proportion) {
? ? return (direction == "x" ?
? ? ? ? visualWidth : visualHeight) * proportion;
}
這個(gè)函數(shù)是計(jì)算當(dāng)前視圖(寬,高)的一半,stratRun這個(gè)函數(shù)是設(shè)置小男孩的top值和left值。根據(jù)walkRun函數(shù)來(lái)通過(guò)后來(lái)設(shè)置好的top和left值是實(shí)現(xiàn)移動(dòng)的動(dòng)畫(huà)效果。
你說(shuō)的小男孩往下走是因?yàn)楸緛?lái)小男孩的top是小于后來(lái)的設(shè)置好的top值的。所以會(huì)往下走。
原的top值是
//獲取小男孩這個(gè)節(jié)點(diǎn)。
var $boy = $("#boy");
var boyHeight = $boy.height();
? ? $('#boy').css({
? ? ? 'top': pathY- boyHeight+25,
? ? ? ?});
現(xiàn)在的top是當(dāng)前視圖的一般
現(xiàn)在的top值是略微大于原小男孩的top值的 所以Y軸往下移動(dòng)
可以看上傳的圖片 黑色的線是原top值 紅色的是后來(lái)要移動(dòng)到的top值 根據(jù)公式比較的話應(yīng)該現(xiàn)有的top要大一些