第209天 jQuery運動框架封裝（二）

運動框架

動畫時間程序

動畫距離程序

物體從0移動到

400

當物體移動到200的時候 走了

50%

同樣的，物體總共執行需要4秒

如果已經過了2.5秒，也表示走了

50%運動公式：s= 總距離（最終的位置

-- 起始位置）

x動畫時間程序

**實現：

1

function
move()

1

//我們封裝成乙個函式 複習函式的封裝性
2function
gettween(now,pass,all)

本質：保證乙個函式只有乙個變化源

封裝變化點

單屬性運動

1

/*單個屬性運動公式*/2
/*起始距離+總距離x動畫時間程序*/3
function
oneproperty(dom,name,start,juli,tween)

使用函式

在函式中定義私有變數（定義子函式）

閉包物件立即函式+閉包

1

//time 表示動畫持續總時間 juli表示動畫走的總距離2//
封裝的最後效果是這個整體不依賴外面的任何變數，如果需要外界提供資料，3//
應該以引數的形式，整個框架只是針對引數進行程式設計
4function
animate(id,time,juli) 
1920
21/*
停止*/
22function
stop()
2526
/*單個屬性運動公式
*/27
/*起始距離+總距離x動畫時間程序
*/28
function
oneproperty(id,name,start,juli,tween)
3233
//每次迴圈執行的**
34function
move() else43}
44 }

1

var json = ;

1

/*設計模式 -- 介面卡*/2
function
adapter(source);*/5
/*我需要的資料格式*/6
78/*計算乙個屬性：id name 起始距離 總距離 tween*/9
/*juli:最終位置 ---起始位置
*/10
/*start：$$.css('left')
*/11
/*parsefloat($$.css('left'))
*/12
/*juli:300 - start
*/13
14var styles=
15/*
var styles=[16,
17,18]
19*/
20for(var item in
source)
22/*
屬性名稱
*/23 style.name =item;
24/*
起始位置
*/25 style.start =parsefloat($$.css(id,item))
26/*
距離 = 起始位置 -- 初始位置
*/27 style.juli = parsefloat(source[item]) -style.start
28styles.push(style)29}
30return
styles
31 }

1

function
oneproperty(id,name,start,juli,tween)
5else
8 }

2018-03-31 21:20

半指溫柔樂 閱讀(

...)

編輯收藏

15天學會jQuery 第15天

讓我產生修改想法的，是他的 在yahoo上的應用。我不喜歡他使用的 所以我重寫了他的部分 成了現在這個樣子 我的示例 改進 html標準校驗 我的 可以通過w3.org的測試 改進 命名 在我修改cody的 的時候我發現他使用了乙個用來儲存鏈結名稱的叫做 title 的變數名，這會導致一些混淆。我標...

第69天 jQuery入口函式

1 事件源 js方式 document.getelementbyid id jquery方式 id 2 事件 js方式 document.getelementbyid id onclick jquery方式 id click 區別 jquery的事件不帶 on3 事件處理程式 js 書寫方式 doc...

第77天 jQuery事件繫結觸發

div height 高度 div width 寬度 height 方法和 css height 的區別 返回值不同，height 方法返回的是數字型別 20 css height 返回的是字串型別 20px 因此.height 方法常用在參與數學計算的時候 div offset 獲取或設定座標值設...