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