如果你完全不懂，那么期望1-2周看完一遍拉倒....不用看的太仔細(xì)，后面再看到不懂的時候回頭去看這些東西好了 [B]1. 前言和準(zhǔn)備工作[/B] 這里不會介紹什么軟件的用法一類的東西。如果覺得手寫代碼是在裝的人可以出去了，謝謝。 首先你要有臺電腦。然后它應(yīng)該裝著windows 和 IE。下面所談到的代碼都僅在IE6.0下調(diào)試通過，但是我會盡量用標(biāo)準(zhǔn)的寫法。這里先不仔細(xì)介紹兼容性問題了，那是另一個教程的事情。我習(xí)慣用記事本或者UltraEdit來編輯，實(shí)際上任何文本編輯器都可以，只要你喜歡。具體怎么用這些工具就不說了，俺們加快速度。 [B]2. 第一個例子[/B] 做什么好呢？俺們從最簡單的開始吧....給自己一個作個特效玩玩？...讓俺想想....做一個可以扔的方塊怎么樣？開始做了... [B]2.1 方塊[/B] [code][/code] 不要說俺在敷衍啊，萬事都有個非常簡單的開始，就像俺被俺前mm踹掉一樣... ps： 細(xì)心的朋友也許會發(fā)現(xiàn)俺的 cursor 用的是 pointer 而不是 hand，這是因?yàn)閔and 屬性不符合標(biāo)準(zhǔn)。雖然俺只為IE寫代碼，但是保持好的習(xí)慣是必要的。以后此類問題一律用 “(兼)”標(biāo)記。 [B]2.2 可以拖動的方塊 2.21 綁定鼠標(biāo)事件：按下，拖動，釋放；獲取事件信息：位置，發(fā)生的元素[/B] [code] [/code] 對于菜鳥來說，這段代碼其實(shí)包含了很多的內(nèi)容。 ⑴ 變量的命名 這是個非常重要的東西，我不得不把這段話編號為 2.210 就是為了提醒剛?cè)腴T的菜鳥 － 用一個自己能明白的名字去命名你的變量。如果你要以此為生，最好也要讓你的變量名能被別人看懂。 ⑵ 綁定事件 － 回字的四種寫法 a) 直接在HTML元素標(biāo)記中寫入： onmousedown="divBlock_event_mousedown();" b) 將事件函數(shù)的句柄賦值給相應(yīng)的事件：document.onmousemove=document_event_mousemove; （注意賦值的函數(shù)名后面并沒有括號） c) 使用 attachEvent 方法（對于FF類的瀏覽器來說是 addEventListener） ps：解除事件的綁定也有相應(yīng)方式，就不羅嗦了 ⑶ 不要被那個 I_do_not_care=... 什么的迷惑，那個是三元表達(dá)式，如果你有認(rèn)真學(xué)習(xí) JS語法的話。那樣寫的目的是兼容。 ⑷ 在函數(shù)體的最前面就聲明需要用到的變量是個好習(xí)慣，它可以避免你犯很多莫名其妙的錯誤 － 比如遞歸的死循環(huán)之類的。當(dāng)然，如果你壓根不喜歡這個變量（就像俺那個 I_do_not_care 一樣），那么就隨它去吧。 ⑸ e=window.event?window.event:e; 也是為了兼容。其實(shí)這句只是獲得 event 對象而已。用 e.clientX 而不用 e.x 也是兼容問題。obj.firstChild.nodeValue 而不是 obj.innerText 同理。而不是 也是同理。 － 兼容真是個tnnd 問題。 ⑹ 如果你發(fā)現(xiàn)自己還是有些糊涂，回去復(fù)習(xí) 0.1 和 0.2 節(jié)中提到的事件部分 [B]2.22 拖動方塊[/B] [code] [/code] ⑴ 編程是件腦力活動，呵呵。首先要先琢磨出來，拖動意味著什么。其實(shí)拖動就是判斷鼠標(biāo)位置，然后改變你需要拖動的元素的坐標(biāo)而已。那么分成兩步：判斷鼠標(biāo)位置，改變元素的坐標(biāo)。這個看起來也不難。前一點(diǎn) 2.21 剛討論過。后一點(diǎn)，如果你對 JS 操作 CSS 有所了解的話也是輕而易舉（不明白的回頭去看0.3節(jié)）。 ⑵ 現(xiàn)在俺詳細(xì)描述下這個過程： a) 鼠標(biāo)按下時，判斷鼠標(biāo)的位置。將鼠標(biāo)坐標(biāo)和元素坐標(biāo)的差存在元素的 startX 和 startY 兩個自定義的屬性里。綁定鼠標(biāo)移動事件。 b) 鼠標(biāo)移動時，判斷鼠標(biāo)的位置。將鼠標(biāo)坐標(biāo)和 startX / startY 的差值作為新的元素坐標(biāo)。（你問我為啥這樣算？帥哥請回去重修高中數(shù)學(xué)，呵呵） c) 鼠標(biāo)按鍵抬起，清除鼠標(biāo)移動事件的相應(yīng)。（不然你放開了鼠標(biāo)方塊還是跟著你跑） ⑶ 為啥用 document 的事件綁定而不是把事件綁定在 div上面？問的好（你不會沒想到這個問題吧？...）如果你試著將事件綁定在div上，你會發(fā)現(xiàn)隨著鼠標(biāo)的快速移動，很容易把div給甩掉（不理解的同學(xué)請自己去動動手）。具體的為什么不多說了，點(diǎn)到即止，希望菜鳥多多思考。 ⑷ 不定義 position="absolute" 的話，left 和 top 是無效的 － 方塊不會動的說 [B]2.3 可以移動的方塊[/B] [B]2.31 物理模型和面向?qū)ο骩/B] [code] [/code] ⑴ 這個模型很簡單： 物體的屬性：速度（包含 x 分量和 y 分量，這里設(shè)置為一個0-5的隨機(jī)數(shù)） 物體的方法：運(yùn)動 環(huán)境屬性：運(yùn)動阻尼 f, 和窗口邊緣碰撞彈性系數(shù) k, 重力加速度 g ⑵ 注意 obj.move 那個方法（函數(shù)）的寫法 [B]2.32 讓方塊動起來[/B] [code] [/code] 代碼開始變難了啊，呵呵。請仔細(xì)閱讀注釋。 ⑴ 說到底只不過是個物理過程的算法表達(dá)而已。其中移動的實(shí)現(xiàn)和前面 2.22 節(jié)的拖動是類似的。 ⑵ 注意感覺這里代碼中 this 的使用。我在 Obj.move 中使用 this 的時候，this指的就是 Obj ⑶ 注意我把 Obj 放在了函數(shù)外面。這時候它就是一個全局變量。這是為了后面使用 setInterval 而準(zhǔn)備的。很多菜鳥在用定時器的時候常常發(fā)現(xiàn)“找不到對象”的錯誤，請注意一下變量的定義域問題。 ⑷ 菜鳥注意學(xué)習(xí)內(nèi)置對象 Math 的方法 [B]2.33 讓方塊停下來[/B] [code] [/code] 在方塊上按下鼠標(biāo)，它會停下來，彈起鼠標(biāo)，它就繼續(xù)跑了，呵呵。 ⑴ 沒人注意到 2.211 綁定事件 － 回字的四種寫法只舉出了三種綁定事件的方法嗎？呵呵，這里是第四種： obj.onmousedown=function(){ this.stop(); } ⑵ 我把 setInterval 改成了 setTimeout, 并且將定時器的句柄保存在了 obj 的屬性里。這種使用定時器的做法是值得菜鳥借鑒的。 [B]2.4 大結(jié)局 － 可以拋出的方塊[/B] [code] [/code] 用鼠標(biāo)按住方塊，然后移動鼠標(biāo)，同時松開鼠標(biāo)，看看效果吧，呵呵 這個例子算結(jié)束了，哈哈。不作講解了，各位自己看吧。